文章目录

一、ReduxRedux设计思想Redux API1. store2. state3. ActionAction creator 生成Actionstore.dispatch() view发出Action的唯一方法 4. Reducer 工作流程 二、react-reduxui组件和容器组件conectmapStateToPropsmapDispatchToProps()作为函数时作为对象时 provider

一、Redux

前两章介绍了props和state，当时有说到，对于大量的组件需要共用同一条数据时，使用props传递是非常麻烦的事情，所以出现了Redux

Redux设计思想

Web 应用是一个状态机，视图与状态是一一对应的。

所有的状态，保存在一个对象里面。

Redux原则

唯一数据源保持状态只读数据改变只能通过纯函数完成

Redux API

1. store

用于保存数据，一个应用只有一个store

创建方法：

createStore(fn)

返回新生成的store

2. state

store对象包含所有的数据

const state = store.getState()

一个state对应一个view

3. Action

用户需要改变数据时，操作不到state，只能改变view，所以Action相当于一个消息，运数据到store，通知state变化

Action是一个对象类型，用于描述当前发生的事情，表现形式如下：

const action = { type: 'ADD_TODO', //表示action的名称 payload: 'Learn Redux'//携带的字符串信息 };

Action creator 生成Action

View 要发送多少种消息，就会有多少种 Action。如果都手写，会很麻烦。可以定义一个函数来生成 Action，这个函数就叫 Action Creator。

const ADD_TODO = '添加 TODO'; function addTodo(text) { //Action creator return { type: ADD_TODO, text } } const action = addTodo('Learn Redux');

store.dispatch() view发出Action的唯一方法

store.dispatch() 接受一个Action对象作为参数，将它发送出去

import { createStore } from 'redux'; const store = createStore(fn); store.dispatch({ type: 'ADD_TODO', payload: 'Learn Redux' });

结合 Action Creator，这段代码可以改写如下。

store.dispatch(addTodo('Learn Redux'));

4. Reducer

strore收到action时，需要对view作出变化，这时，就是需要给出一个新的state，就需要Reducer来作出计算。

Reducer是一个函数，接受两个参数；

当前stateaction const defaultState = 0; const reducer = (state = defaultState, action) => { switch (action.type) { case 'ADD': return state + action.payload; default: return state; } }; const state = reducer(1, { type: 'ADD', payload: 2 });

上面代码中，reducer函数收到名为ADD的 Action 以后，就返回一个新的 State，作为加法的计算结果。

实际应用中，Reducer 函数不用像上面这样手动调用，store.dispatch方法会触发 Reducer 的自动执行。为此，Store 需要知道 Reducer 函数，做法就是在生成 Store 的时候，将 Reducer 传入createStore方法。

import { createStore } from 'redux'; const store = createStore(reducer);

上面代码中，createStore接受 Reducer 作为参数，生成一个新的 Store。以后每当store.dispatch发送过来一个新的 Action，就会自动调用 Reducer，得到新的 State。

工作流程

用户操作视图发出action，Store 自动调用 Reducer，并且传入两个参数：当前 State 和收到的 Action。 Reducer 会返回新的 State 。state变化，store会调用监听函数，通过store.getState()得到当前状态，触发重新渲染view

二、react-redux

ui组件和容器组件

react-redux是redux的一个库，将所有组件分为两大类，ui组件和容器组件

ui组件 负责ui的实现，不负责业务逻辑咩有state，即状态所有数据由props提供不使用redux的api 容器组件 负责管理数据和业务逻辑由state内部状态使用redux的api

UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。

conect

（1）connect代码结构

import hoistStatics from 'hoist-non-react-statics' export default function connect(mapStateToProps, mapDispatchToProps, mergeProps, options = {}) { // ... return function wrapWithConnect(WrappedComponent) { // ... class Connect extends Component { // ... render() { // ... if (withRef) { this.renderedElement = createElement(WrappedComponent, { ...this.mergedProps, ref: 'wrappedInstance' }) } else { this.renderedElement = createElement(WrappedComponent, this.mergedProps ) } return this.renderedElement } } // ... return hoistStatcis(Connect, WrappedComponent); } }

connect 函数本身返回名为 wrapWithConnect 的函数，而这个函数才是真正用来 装饰 React 组件的。而在我们装饰一个 React 组件时，其实就是把组件在 Connect 类的 render 方 法中进行渲染，并获取 connect 中传入的各种额外数据。

connect是用来连接ui组件和逻辑组件 connect需要两个参数

mapStateToProps，输入逻辑，即建立state对象到props对象的映射关系mapDispatchToProps，输出逻辑，即建立ui组件的参数到store.dispatch方法的映射

输入逻辑：即外部数据（state对象）->ui组件的参数 输出逻辑：通过用户操作定义action对象，传给store

mapStateToProps

connect的第一个参数，定义了我们需要从 Redux 状态树中提取哪些部分当作 props 传给当前 组件

mapStateToProps执行后应该返回一个对象，里面的每一个键值对就是一个映射。当然也可以传入一个函数，原因是在 connect 的第一个参数里利用函数闭包进行一些复杂计 算的缓存，从而实现效率优化的目的。

mapStateToProps是一个函数，它接受state作为参数，返回一个对象。这个对象有一个todos属性，代表 UI 组件的同名参数，后面的getVisibleTodos也是一个函数，可以从state算出 todos 的值。

const mapStateToProps = (state) => { return { todos: getVisibleTodos(state.todos, state.visibilityFilter) } } //函数 const getVisibleTodos = (todos, filter) => { switch (filter) { case 'SHOW_ALL': return todos case 'SHOW_COMPLETED': return todos.filter(t => t.completed) case 'SHOW_ACTIVE': return todos.filter(t => !t.completed) default: throw new Error('Unknown filter: ' + filter) } }

mapStateToProps会订阅 Store，每当state更新的时候，就会自动执行，重新计算 UI 组件的参数，从而触发 UI 组件的重新渲染。

mapDispatchToProps()

mapDispatchToProps是connect函数的第二个参数，用来建立 UI 组件的参数到store.dispatch方法的映射，它可以是一个函数，也可以是一个对象它接受 store 的 dispatch 作为第一个参数，同时接受 this.props 作为可选的第 二个参数。

作为函数时

有两个参数dispatch和props 返回一个对象，该对象的每个键值对都是一个映射，定义了 UI 组件的参数怎样发出 Action。

const mapDispatchToProps = ( dispatch, ownProps ) => { return { onClick: () => { dispatch({ type: 'SET_VISIBILITY_FILTER', filter: ownProps.filter }); } }; }

作为对象时

通过定义一个方法，自动返回action

const mapDispatchToProps = { onClick: (filter) => { type: 'SET_VISIBILITY_FILTER', filter: filter }; }

provider

connect方法生成容器组件后，需要通过provider拿到state对象

import { Provider } from 'react-redux' import { createStore } from 'redux' import todoApp from './reducers' import App from './components/App' let store = createStore(todoApp); render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') )

上面代码中，Provider在根组件外面包了一层，这样一来，App的所有子组件就默认都可以拿到state了。

参考文章： https://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react-redux.html

http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html