引言 最近一直想尝试去了解下redux的用法，无奈各种杂事成堆
关于redux, 熟悉vuex的童鞋们一定能够猜出个所以然；redux就是用于不同层级，负责项目之间通信作用的。正如react种props只能有父类向子类传递数据，而redux正是解决非父子组件（跨组件）之间的通信的。
这里举个例子来阐述下react中数据是如何传递的
react.png
这里如果教导主任想传达一个指令（初始化state)
就必须得经过老师(传递props)
最后才能到达学生
这种是react本身得一种通信机制，但是缺点就是不能跨越等级去传递
关于redux
- store
这个是用来存放redux得数据得，redux应用只有一个单一的store
import { createStore } from 'redux'
import todoApp from './reducers'
let store = createStore(todoApp)
createStore: 有两个参数，第一个存放reducer , 第二个存放state数据的初始状态
- action
主要是用来描述你的一个对象，就是要描述这个对象是去干什么的；action是stores数据的唯一来源
const ADD_TODO = 'ADD_TODO'
{
type: ADD_TODO, // 默认字段 表示你要干什么的
text: 'Build my first Redux app'
}
传递数据：store.dispatch(action) 将数据传个store
- reducer
Reducers 指定了应用状态的变化如何响应 actions 并发送到 store 的，记住 actions 只是描述了有事情发生了这一事实，并没有描述应用如何更新 state。
const defaultState = 0;
const reducer = (state = defaultState, action) => {
switch (action.type) {
case 'ADD_TODO':
return state + 1;
default:
return state;
}
};
-
如何传递数据
store数据只有一个，那么你必须在最顶层出创建一个store对象，让后再一层层传递下去 - 获取redux中的数据
store.getState()
- 更新数据
···
store.dispatch({type: 'ADD_TODO', text: 2}) - 更新dom
以上步骤只是代表更新了redux中的数据，并没有更新dom
store.subscribe(callback)
到此为止，并没有做到数据的真正共享
react-redux
真正实现各组件通信
- provider
再顶层节点去包裹它
<Provider store = {store}>
<App/>
<Provider>
这样就能使state数据共享
- connect(mapStateToProps, mapDispatchToProps)(MyComponent) 传递数据
mapStateToProps
字面含义是把state映射到props中去，意思就是把Redux中的数据映射到React中的props中去。
mapDispatchToProps
通过上面的分析，相信这个函数也很好理解，就是把各种dispatch也变成了props让你可以直接使用
const mapStateToProps = (state, ownProps) => ({
// ... 从state中处理的一些数据，以及可选的ownProps
});
const mapDispatchToProps = {
// ... 通常是action creators构成的对象
};
// `connect`返回一个新的函数，可以接收一个待包装的组件
const connectToStore = connect(
mapStateToProps,
mapDispatchToProps
);
// 上面的函数能够返回一个已经包装、连接过的组件
const ConnectedComponent = connectToStore(Component);
export default App = connect(mapStateToProps, mapDispatchToProps)(App)
// 我们通常写成一条语句如下：
connect(
mapStateToProps,
mapDispatchToProps
)(Component);
redux 中reducer为什么要设计成纯函数模式
然后说一下为什么reducer最好是纯函数，首先你得看看文档怎么说reducer的作用的，‘接收旧的 state 和 action，返回新的 state’，您可得瞧好咯，他就是起一个对数据做简单处理后返回state的作用，为什么只起这个作用，这时用设计这个词回答这个问题才恰当，因为redux把reducer设计成只负责这个作用。很白痴的问答对吧，所以题目的答案也就简单了，reducer的职责不允许有副作用，副作用简单来说就是不确定性，如果reducer有副作用，那么返回的state就不确定，举个例子，你的reducer就做了一个value = value + 1这个逻辑，然后返回state为{value}，ok，这个过程太jr纯了，然后你可能觉得要加个请求来取得value后再加1，那么你的逻辑就是value = getValue() + 1, getValue是个请求函数，返回一个值，这种情况，退一万步讲，如果你的网络请求这次出错，那么getValue就返回的不是一个数值，value就不确定了，所以return的state你也不确定了，前端UI拿到的数据也不确定了，所以就是这个环节引入了副作用，他娘的redux设计好的规范就被你破坏了，redux就没卵用了。到此为止这个问题回答完了，我没有说什么上面几个jr说的教科书的理论，甚至还加了些脏话。请原谅，这只是戏剧需要。
最后我回答下如何解决这个副作用，实际上也很白痴的问题，这里的请求可以放在reducer之前，你先请求，该做出错处理的就做出错处理，等拿到实际数据后在发送action来调用reducer。这样通过前移副作用的方式，使reducer变得纯洁。
总而言之就是 redux的设计思想就是不产生副作用，数据更改的状态可回溯，所以redux中处处都是纯函数
网友评论