redux

redux 的目录架构

import {createStore,applyMiddleware,combineReducers} from 'redux';
import thunk from 'redux-thunk';
import {Provider} from "react-redux"

store
1.全局只有一个store通过函数createStore创建 参数是reducer
1.1 createStore(Reducer,applyMiddleware(thunk)); action异步对象
1.2 createStore(combineReducers({key:reducers}),applyMiddleware(thunk)); action异步对象

2. api

2.1 diaptch(action)
2.2 subacriber(cb)  ??无效
2.3 getState()

组件

1. 需要根据store.getState()获取存储的状态
2. 修改需要store.dispatch(action)分发给reducer处理
3. redux是可以帮助你修改state中的状态，但是不会执行render重新渲染界面,render自己调用是无效的
   reducer
 4. 打工人,收到分发任务立马工作，并且返回最新的state
 5. 除了加工，state中的状态的初值也是reducer提供的。会在创建store的时候自动调用reducer
    dispatch
       组件与store沟通的工具人，传递action
      actionCreator
 6. 生产action对象

 1.1 同步action对象,是一个js对象，包括type以及data属性
 1.2 异步action对象，是一个函数 ??
    export const createAddActionAsync = (data,time) =>{
      return (dispatch)=>{
        setTimeout(()=>{
          //store 需要的action 是obj fun无法让reduces干活没type data
          // 收到函数（异步任务）的时候 帮助执行 最后会返回个obj
          // store需要中间件 redux-thunk 有了它 store可以接受一个函数action 
          dispatch(createAddAction(data))
        },time)
      }
    };

react-redux

1. containComponent
   connect生成containComponent
   app 中render containComponent传递store
2. uiComponent
   不可操作redux 只能借助props操作
3. store 
4. connect
   const containComponent = connect(mapStateToProps,mapDiapatchToProps)(UI)
5. api
   [传递状态]mapStateToProps(state) 接受container传递的state 返回状态对象作为props传递给UI组件
   [传递操作状态]mapDiapatchToProps(dispatch) 接受container传递的dispatch 返回修改(操作)状态的对象作为props传递给UI组件
   mapStateToProps以及mapDiapatchToProps react-redux调用时机
6. Provider
   容器组件是app的子组件容器组件的store是作为参数穿进去的,多个容器就得传递多次可以使用Provider 入口使用
   Provider 会分析页面有多少容器组件 传递store
7. mapDiapatchToProps 可以是一个对象 
   提供 action react-redux 会自动帮你分发给store 然后调用dispatch给reducers
8. 使用react-redux的可以自动监控state的变化,界面会自动更新。
9. combineReducers 参数为对象 value是reducer