React中的redux架构思维

redux要点

1. redux基础
2. redux中数据的划分（ reducer 划分）
3. redux中的中间件

组成部分

1. store 数据的管理者
2. view react的组件来充当
3. actionsCreators 动作的创建者， 用来发送一个 action ❥(^_-)
4. reducer 动作的触发者， 用来修改数据的 ，reducer是一个纯函数，它里面有一个返回值， 返回值是什么， 那么newState就是什么

redux的基础使用流程 吉德林法则

得有一个工具 redux

1. 安装 redux

 yarn add redux

2. 创建一个共享的数据存储仓库 文件夹 store
   src
   store
   index.js

3. store的创建

   import { createStore } from ‘redux’

   const store = createStore(reducer)

   export default store

4. 创建reducer.js 纯函数

    /* 
    reducer 是一个纯函数 ，函数接收两个参数，第一个参数是 previousState, 第二个参数是 action
   
    previousState = state 赋初始值时，会将地址浅拷贝给previousState,当previousState改变时，
    会影响state, 我们应该避免这种情况，所以我们要做一个深拷贝，我们使用最简单的形式就是：解构赋值
   
    那么我们就可以直接去管newState
    */
    import state from './state'
    import * as type from './type'
    const reducer = ( previousState = state, action ) => {
   
   
    var newState = {
        ...previousState
    }
   
    switch ( action.type ) {
        case type.ADD_TODOS:
            //修改数据的
            newState.todos.push({
            id: newState.todos.length + 1,
            text: action.payload
            })
        break;
    
        default:
        break;
    }
   
    console.log( newState )
   
    return  newState
    }
   
   
    // module.exports = reducer
   
    export default reducer
   

5. 初始化状态

创建  state.js 
    const state = {
        todos: [
            {},{}
        ]
    }
import state from './state'

const reducer = (previousState = state,action) => {
    let new_state = previousState
    return new_state
    }

6. reducer要将数据 给 store

 import reducer from './reducer'

    const store = createStore(reducer)

7. store —> view

   view
   import store from ‘./store’

    store.getState() 就可以拿到数据了
   
    写无状态组件
   
    写列表渲染函数
    key要加
   

8. view 用户操作 — 》 actionCreators

创建 actionCreators.js
import store from ‘./index’
let actionCreators = {
//方法
fn(){
// 1. 创建 action
let action = {
type: 常量，
payload
}
// 2. 发送 action
store.dispatch(action)
}
}
export default actionCreators

9. reducer 接收 actionCreator 发来的 action
   const reducer = (previousState = state ,action) => {
   let new_state = previousState
   switch (action.type) {
   case type.xxx:
   // 数据的修改
   break;

        default:
        break;
    }
    return new_state
   

   }

10. 视图的更新 —》 重新获取数据

    componentWillMount(){
    store.subscribe(()=>{
    this.setState({
    todos: store.getState().todos
    })
    })
    }

---

redux进阶使用流程

reducer划分

分析
    一个项目： 
        banenr
        home
        mine
        login
        register
        detail
        shopcar
        会员
        普通用户数据

解决： 希望的一个类型数据一个模块 ---- 》 reducer划分 combineReducers


分析： 我们希望我们的store下面每一个文件夹就是一个 类型 的数据包
解决： redux  combineReducers

    每一个数据包的目录结构
        store
            home
                state.js
                type.js
                reducer.js
                actionCreator.js

    我们需要一个统一的redcuer的管理者

        /* 
            这里的reducer才是真正的统一管理者
        */
        import {combineReducers} from 'redux'
        import todolist from './todolist/reducer'

        const reducer = combineReducers({
            todolist
        })

        export default reducer 

使用的时候，

    store.getState().todolist.todos