react redux 大体架构的搭建

1. 下载

• npm install --save redux 或者 yarn add redux ：安装 redux
• npm install --save react-redux 或者 yarn add react-redux React 绑定库和开发者工具(Reducer优化)
• 内容仅供参考，本文涉及到的 变量、常量、方法等只做参考，需要你自己定义

2. 创建目录

3. 书写仓库

//store/index.js
import { createStore } from 'redux';
import reducer from "./reducer"
const store = createStore(reducer);
export default store

4. 书写action

//store/actionCreators.js
import store from "../store"
import {ADD_NEW_TODO,CHANGE_NEW_TODO,DELETE_NEW_TODO} from "./actionType"   //引入常量 //下一步创建
export default {
    addNewTodo(title){ //actionCreators
        let action = {
            type:ADD_NEW_TODO,  //传递的类型，用于判断
            title
        }
        //需要将action派发给reducer进行处理
        store.dispatch(action)
    },
    。。。。。。
 }

5. 书写判断使用到的 常量

//store/actionType.js
const ADD_NEW_TODO  = "ADD_NEW_TODO"
const CHANGE_NEW_TODO  = "CHANGE_NEW_TODO"
const DELETE_NEW_TODO = "DELETE_NEW_TODO"
export {
    ADD_NEW_TODO,
    CHANGE_NEW_TODO,
    DELETE_NEW_TODO
}

6. 书写管理数据的函数 reducer

//store/reducer.js
import {ADD_NEW_TODO,CHANGE_NEW_TODO,DELETE_NEW_TODO} from "./actionType"
let state = {  //定义默认值
    todos:[
        {
            id:1,
            title:"今天周一",
            isFinished:false
        },
		... ...
    ]
}

//需要定义成一个纯函数
const reducer = (prevState = state,action)=>{
    let newState = {...prevState}
    switch(action.type){
        case ADD_NEW_TODO:  //根据类型判断传递过来的参数
            newState.todos = newState.todos.slice()   //因为是添加，所以要额外的给一个新的存储在堆里的数据，
                                                      //要不然改的就是原本的数据，这样会导致数据虽然渲染了，但是项目并不会检测到数据变化
                                                      //如果是删除等则不需要添加此项
            newState.todos.push({id:handler.getId(newState.todos),title:action.title,isFinished:false})
            break;
			... ...
        default :
            break;
    }
    return newState
}


const handler = {
    getId(todos){
        todos = todos.slice()  //将新的数据传递过去
        if(todos.length ===0) return 1
        return todos.sort((a,b)=>{
            return b.id - a.id
        })[0].id + 1
    },
    ... ...
}

export default  reducer

7. 将store 的数据传递给组件

src下的index.js

import store from './store'   //引入 store
import {Provider} from 'react-redux'   //引入 react-redux

ReactDOM.render(
  <Provider store = {store}>   //传递 store
    <App />
    </Provider>,
  document.getElementById('root')
);

8. 获取数据 及 actionCreators 里的 action(第4步) 方法

在你的子组件中

import actionCreators from "../../store/todoList/actionCreators"  //引入 
import { connect } from 'react-redux'  //引入 connect()

const mapStateToProps = state =>({
    todos:state.todoList.todos   //你的 state 数据长什么样子就 state.xxx
})
const mapDispatchToProps = actionCreators;  //actionCreators 创建 action 事件的那个js文件
export default connect(mapStateToProps,mapDispatchToProps)(TodoContent)  //TodoContent子组件名称

• mapStateToProps 可以让UI组件通过属性获取到redux管理的状态（store 数据）
• mapDispatchToProps可以让ui组件通过属性获取到更改redux状态的方法（action 方法）

9. 同一个组件中使用 得到的数据和方法

数据：

    render() {
        return (
            <ul>
                {
                  this.props.todos.map(item=>{   //使用 store 数据 ⬅⬅⬅⬅⬅
                    return <LiItem key={item.id} item={item}/>
                })
                }
            </ul>
        )
    }

方法：

    const deleteTodo = ()=>{  //点击某处触发的函数（无关）
        this.props.deleteNewTodo(props.item.id)    //使用 传递过来 action 的方法
    }