Store

1.需要将多个reducer和并放在一个对象中
2.引入combineReducers
3.通过调用combineReducers,入参一个对象，这里的key可以自己命名，value分别是引入的reducer

//该文件用于暴露store对象
//引入createStore,专门用于创建redux中最核心的store对象
//引入applyMiddleware中间件
import {createStore,applyMiddleware,combineReducers} from 'redux'
//引入为count组件服务的reducer
import countReducer from './reducers/count'
import personReducer from './reducers/person'
//引入react-thunk,用于支持异步action
import thunk from 'redux-thunk'
//汇总reducer变成一个总的reducer
const allReducer=combineReducers({
    he:countReducer,
    rens:personReducer
})
//store中需要一个为之服务的reducer,因此将引入的reducer当参数传入这个创建的store中
//并且将这个store对象暴露出去
//
 export default createStore(allReducer,applyMiddleware(thunk)

Action

创建一个对象，有两个参数，第一个参数是type,第二个参数是需要传递过来的数据data

count_action

import { INCREMENT, DECREMENT} from '../constant'
export const createIncrement=data=>
({
    type:INCREMENT,
    data
})
export const createDecrement=data=>(
    {
        type:DECREMENT,
        data
    }
)
//异步action
export const createAsyncIncrement=(data,time)=>{
    return dispatch=>{
        setTimeout(() => {
            dispatch(incrementAction(data))
        }, time);
    }
}

person_action

import{ADD_PERSON}from '../constant'
export const createPerson=personObj=>({
   type:ADD_PERSON,
   data:personObj
})

Constant

存放常量

//暴露加法和减法
export const INCREMENT='increment'
export const DECREMENT='decrement'
export const ADD_PERSON='add_crement'

Reducers

count_reducer

做一些逻辑处理，这里的函数接受两个参数，第一个参数是之前的值，第二个参数是外界传递过来的action, action是一个对象，对象的参数是type与data

import { INCREMENT, DECREMENT} from '../constant'
const initState=0
export default function countReducer(preState = initState, action) {
    const {
        type,
        data
    } = action
    switch (type) {
        case INCREMENT:
            return preState + data
        case DECREMENT:
            return preState - data
        default:
           return  preState
    }
}

person_reducer

import{ADD_PERSON}from '../constant'
let person=[{id:"001",name:"ws",age:23}]
export default function PersonSum(preState=person,action){
    let {type,data}=action
    switch (type) {
        case ADD_PERSON:
           return [data,...preState]
        default:
           return preState
    }
}

组件中使用

这里的组件有两个，一个是ui组件一个是容器组件，ui组件主要进行展示，容器组件做一些数据加工，容器组件包裹ui组件，并将容器组件暴露出去

login组件

import{ createIncrement,createDecrement, createAsyncIncrement} from '../../redux/actions/count'
//引入store
// import store from '../../redux/count_redux/store'
//引入connect用于连接ui组件和redux
import {connect} from 'react-redux'
import React, { Component } from 'react'
 class index extends Component {
//加
    increment=()=>{
  let {value}=this.selectNumber
   this.props.jia(value*1)
    }
    decrement=()=>{
        let {value}=this.selectNumber
        this.props.jian(value*1)
    }
    //异步加
    asyncIcrement=()=>{
        let {value}=this.selectNumber
        this.props.jiaAsync(value*1,500)
    }
    //奇数加
    oddIcrement=()=>{
        let {value}=this.selectNumber
        if(this.props.count%2!=0){
            this.props.jia(value*1)
        }
    }
    render() {
        return (
            <div>
            <h1>person组件下方总人数{this.props.renshu}</h1>
                <h2>当前显示的数是:{this.props.count}</h2>
                <select ref={c=>this.selectNumber=c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
                <button onClick={this.increment}>加</button>&nbsp;&nbsp;&nbsp;
                <button onClick={this.decrement}>减</button>&nbsp;&nbsp;&nbsp;
                <button onClick={this.asyncIcrement}>异步加</button>&nbsp;&nbsp;&nbsp;
                <button onClick={this.oddIcrement}>奇数加</button>&nbsp;&nbsp;&nbsp;
            </div>
        )
    }
}
//高阶函数，连接ui组件
//使用connect创建并暴露一个math组件
//connect第一个函数是映射ui组件和容器组件的关系，第二个组件是连接ui组件和容器组件
export default connect(
    state=>({
        count:state.he,
        renshu:state.rens.length
    })
    //在react-redux中可以将action自动dispatch给redux,
    //如果两个参数都是函数，第二个参数可以写成一个对象
    ,{
    jia:createIncrement,
    jian:createDecrement,
    jiaAsync:createAsyncIncrement
})(index)

容器组件主要是通过connect进行使用 1.首先需要下载react-redux,yarn add react-redux 2.引入connect 3.connect中可以调用两次，第一次调用可以传递两个函数，第一个函数返回一个对象，对象的值可以通过state.去获取reducer的值，第二个函数返回一个对象，key是我们自己定义的，value是函数。 4.这里的函数可以是处理数据的action，action需要引入进来 5.connect的第二次调用需要将ui组件传递进去

register组件

下载nanoid ,生成一个随机且不重复的id

yarn add nanoid

import React, { Component } from 'react'
import {nanoid} from 'nanoid'
import {connect} from 'react-redux'
import {createPerson}from "../../redux/actions/person"
 class index extends Component {
    addClick=()=>{
     const nameValue=this.nameNode.value
     const ageValue=this.ageNode.value
     const personObj={id:nanoid(),name:nameValue,age:ageValue}
     this.props.jiayiren(personObj)
     this.nameNode.value=""
     this.ageNode.value=""
    }
    render() {
        console.log(this.props.yiduiren,"gggg")
        return (
            <div>
            <h1>上方显示的和为{this.props.sum}</h1>
                <input type="text" placeholder="请输入姓名" ref={c=>this.nameNode=c}/>
                <input type="text" placeholder="请输入年龄" ref={c=>this.ageNode=c}/>
                <button onClick={this.addClick}>添加</button> 
              <ul>
               {
                   this.props.yiduren.map(p=>{
                       return <li key={p.id}>姓名:{p.name}===年龄：{p.age}</li>
                   })
               }
              </ul>
            </div>
        )
    }
}
export default connect(
    state=>(
        {
        yiduren:state.rens,
        sum:state.he
    }),{
        jiayiren:createPerson
    }
)(index)

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './redux/store'
  ReactDOM.render(
    // React.StrictMode检查app和app包裹的组件是否合理
 <Provider store={store}>
 <App />
 </Provider>  
,
    document.getElementById('root')
  );

app.js

import Login from './components/Login'
import Register from "./components/Register"
function App() {
  return (
    <div>
      <Login/>
      <hr/>
      <Register></Register>
    </div>
  );
}
export default App;