react redux学习笔记（三）

2019-03-29 本文已影响0人 ybrelax

引言最近一直想尝试去了解下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中处处都是纯函数

react redux学习笔记（三）

猜你喜欢

热点阅读