逆战1913React-redux学习心得

Redux

是负责组织 state 的工具！
也叫状态管理工具 ，同类的还有 ( flux， mobx)！
所有的 state 都以一个对象树的形式储存在一个单一的 store 中。
惟一改变 state 的办法是触发 action，一个描述发生什么的对象。
为了描述 action 如何改变 state 树，你需要编写 reducers。

三个原则
1） store是唯一的
2) state 是只读的
3） 通过纯函数reducer 能够对状态进行修改

把要做的修改变成一个普通对象，这个对象被叫做 action，而不是直接修改 state。然后编写专门的函数来决定每个 action 如何改变应用的 state，这个函数被叫做 reducer。

Redux 只有一个单一的 store 和一个根级的 reduce 函数（reducer）。随着应用不断变大，你应该把根级的 reducer 拆成多个小的 reducers，分别独立地操作 state 树的不同部分。

分模块
var reducer = combineReducers({ 返回的reducer 是总的reducer
模块的名字: 引入的reducer
})

//分模块以后
store.getState().模块的名字.变量

使用步骤

1. 引入 createStore import {createStore} from ‘redux’;

2. 设置初始数据
   initState ={ key:value}

3. 传给reducer
   reducer(state=initState,action) 纯函数

4. createStore(reducer);

5. 导出 export default store

6. store.getState().state中的变量

修改数据

1） store.dispatch(动作)
action 是一定含有type的一个对象 ,
2) 动作发给了 reducer 第二个参数 action
action 一定有type ,还可能接收一些其他参数
3) 根据type修改数据
a. 做 state 的复本
b. 修改state的复本对象
c. 返回新的state
2) store
store getState dispatch({type:‘XXX’,key:value…})
3) action对象的type值 千万不要重复

store
1)getState() 获取状态
2) dispatch({type,playload}) 抛发动作给reducer
3) subscribe 监听store里的数据变化

修改

组件里 store.dispatch(action（actionCreator）) ---->
reducer(type,action) —>
复制副本，修改,返回–>
组件里通过store.getState() 取最新的值（subscribe)

React-Redux

react-radux就是将所有组件分成两大类：
UI 组件（presentational component）和容器组件（container component），以便于更好的优化和管理代码。

UI组件

我的理解是，它就是单纯的对页面的渲染，不负责逻辑的运行，无状态，并且通过父级的props拿到数据state

容器组件

它用来写业务逻辑各方面的数据管理，不负责进行对页面的渲染

在react-redux中容器组件是react-redux自动生成的，而使用者只需要编写UI组件即可

Provider

它是react-redux 提供的一个 React 组件。用来接收store中的state，并且作为props通过context对象传递给子组件。
用法：
在根组件外层包裹
这样就可以使整个项目的组件成为Provider 的子组件，并通过props获取数据。

或者加入路由：

connect

高阶组件 连接容器组件和ui组件
connect方法接受两个参数：mapState和mapDispatch。它们定义了 UI 组件的业务逻辑。

mapState

映射的时候，可以做计算的值的映射

mapDispatch =(dispatch)=>bindActionCreators(actionCreator,dispatch);

相当于直接写 actionCreator

异步操作
redux-thunk
a) yarn add redux-thunk
b) applyMiddleware
c)createStore(reducer,applyMiddleware(thunk));
4) actionCreator里面，，
方法要返回 回到函数，参数就是 dispatch

 return (dispatch)=>{
 	异步的动作 成功后再异步动作回调里 使用dispatch发出动作给reducer
 }