关于redux: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