Redux使用实例

一. 纯原生 redux 的使用

Redux 是常用的状态管理容器，能够帮助我们对一些全局变量进行有效管理。首先，举一个场景：我正在开开心心的逛淘宝商城，点进了一个淘宝店家的商品 A 的详情页，觉得不错，于是点击 ”加入购物车“，接着我又点进了一个天猫店家的商品 B 的详情页，也觉得不错，又点击了 ”加入购物车“，最终我打开购物车发现有 A B 两件商品。假设淘宝商品详情页和天猫商品是两个相互独立的组件，那么要实现上述场景，购物车就应当是一个共享组件，此时就可以使用 redux 对购物车实现统一管理。那么以当前这个场景，使用原生 redux 应该怎么实现呢？废话不多说，看如下实现：

1. 安装 redux

   redux 支持 npm 等包管理工具，故而进入项目目录中，执行 npm install redux --save / yarn add redux

2. 建立一个仓库来存储数据

   // store.js
   import {createStore} from 'redux' // 声明一个实际的操作函数，响应操作 const cartReducer = (state = { goods: [] }, action) => { switch (action.type) { case 'add': return {...state, goods: [...state.goods, action.good]} case 'delete': let deletedGoodIdx = action.good.index let newGoods = [...state.goods] newGoods.splice(deletedGoodIdx, 1) return {...state, goods: newGoods} default: return state } } // 创建 store 实例并导出 const store = createStore(cartReducer) export default store 

3. 在组件中使用 store

   读取：store.getState() 即可获取到 reducer 中的 state

   修改：store.dispatch(action) 通过 dispatch 一个 action 来触发 reducer 中的修改行为

   /********** App.js **************/
   import React from 'react'
   import {Link, Route} from 'react-router-dom' import store from './store' // 淘宝商品详情组件 function TbItem() { return ( > >这是淘宝详情页</h2> >当前购物车内商品数量：{store.getState().goods.length}</p> ={() => store.dispatch({type: 'add', good: {title: `淘宝商品${Date.now()}`, price: 100}})}>添加购物车</button> </div> ) } // 天猫商品详情组件 function TmItem() { return ( > >这是天猫详情页</h2> >当前购物车内商品数量：{store.getState().goods.length}</p> ={() => store.dispatch({type: 'add', good: {title: `天猫商品${Date.now()}`, price: 200}})}>添加购物车</button> </div> ) } // 购物车组件 function Cart() { let goods = store.getState().goods return ( > { goods.map((good, index) => { return ( 
   ={index}> >{good.title}</span> ={() => store.dispatch({type: 'delete', good: {index}})}>删除</button> </li> ) }) } </ul> ) } // 使用 react-router-dom 配置两个页面 function App() { return ( 
   ="App"> > ="/tb">淘宝</Link> | ="/tm">天猫</Link> </div> ="/tb" component={TbItem}></Route> ="/tm" component={TmItem}></Route> ></Cart> </div> ); } export default App 

4. 在 index.js 中订阅 store

   一旦 store 发生更改，则重新 render 整个 App

   /*************index.js***************/
   import React from 'react'
   import ReactDOM from 'react-dom' import App from './App' import store from './store' import {BrowserRouter} from 'react-router-dom' const render = () => { ReactDOM.render( > /> </BrowserRouter>, document.getElementById('root') ) } // 第一次启动时，直接渲染 render() // 监听 store 的变化 store.subscribe(render) 

二. react-redux 及中间件使用

从上面的例子中可以看到，使用原生的 redux 对 store 的读取和操作都比较麻烦，同时还需要在 index.js 上手动调用渲染函数。因此，在实际项目中，通常使用 react-redux 库结合 redux-thunk 中间件（用于异步操作）来管理状态，同样以上述中的例子，看看 react-redux 的实现有什么不同。

1. 安装

   npm install react-redux redux-thunk --save

2. 同样需要创建一个仓库来存储

   一般将 reducer 独立为一个文件书写，使代码结构更加清晰

   /************cart.redux.js************/
   // cartReducer 与上一章节保持一致
   const cartReducer = (state = { goods: [] }, action) => { // ... } // 定义 action 操作 const addGood = (good) => ({type: 'add', good}) const deleteGood = (good) => ({type: 'delete', good}) // 异步 action，使用 thunk 中间件之后可以如下书写 const asyncAddd = (good) => dispatch => { setTimeout(() => { dispatch({type: 'add', good}) }, 2000) } // 将 reducer 和 action 方法导出 export {cartReducer, addGood, deleteGood, asyncAddd} 

3. 使用 Provider 包裹 App，并传递 store 参数

   /****************index.js******************/
   import React from 'react'
   import ReactDOM from 'react-dom' import App from './App' import {BrowserRouter} from 'react-router-dom' import {Provider} from 'react-redux' import {createStore, applyMiddleware} from 'redux' import thunk from 'redux-thunk' import {counterReducer} from './cart.redux' const store = createStore(counterReducer, applyMiddleware(thunk)) ReactDom.render( > ={store}> /> </Provider> </BrowserRouter>, document.querySelector('#root') ) 

4. 使用 connect 高阶组件加工 App 组件

   /****************app.js******************/
   // ...
   import {connect} from 'react-redux' import {addGood, deleteGood, asyncAdd} from './reactRedux/cart.redux' function App() { // ... } App = connect( state => ({goods: state.goods}), {addGood, deleteGood, asyncAdd} )(App) export default App 

   也可以配置装饰器模式，采用装饰器模式书写：

   @connect(
      state => ({goods: state.goods}), {addGood, deleteGood, asyncAdd} ) // 使用装饰器时需要用 class 声明组件 class App extends React.Component { // ... } 

   在 App 组件内需要读取商品列表可采用 this.props.goods 获取，需要添加商品则可以调用 this.props.addGood(good)，需要删除商品时则可以调用 this.props.deleteGood(good)。至于如何将参数传递给子组件 TbItem 和 TmItem 则有三种实现方案：

   • 使用父子组件通信的方法，通过 实现；

   • 同样用 connect 高阶组件装饰一下组件，组件内通过 this.props 获取 store 中的属性和方法；

   • 利用 context 实现，在 Parent 组件中定义 静态属性childContextTypes 和 getChildContext 方法，Child 组件中定义 静态属性 contextTypes 并在构造函数中将 context 传递给 super()函数

     /****************父组件******************/
     // ...
     import PropTypes from 'prop-types' class App extends React.Component { static childContextTypes = { goods: PropTypes.object } getChildContext() { return { goods: this.props.goods }; } // ... } /****************子组件******************/ class TbItem extends React.Component { static contextTypes = { goods: PropTypes.object, } constructor(props, context){ super(props, context) // ... } // ... }

 

学习笔记

 设计思想

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

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

Reducer ：Store收到Action后，必须给一个新的state，这样View才会发生变化，这种state的计算过程就叫Reducer

Store 就是保存数据的地方，你可以把它看成一个容器。整个应用只能有一个 Store。

const reducer = function (state, action) {
  // ...
  return new_state;
};

实际例子

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 函数不用像上面这样手动调用，store.dispatch方法会触发 Reducer 的自动执行。为此，Store 需要知道 Reducer 函数，做法就是在生成 Store 的时候，将 Reducer 传入createStore方法。

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

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

为什么这个函数叫做 Reducer 呢？因为它可以作为数组的reduce方法的参数。请看下面的例子，一系列 Action 对象按照顺序作为一个数组。

const actions = [
  { type: 'ADD', payload: 0 },
  { type: 'ADD', payload: 1 },
  { type: 'ADD', payload: 2 }
];

const total = actions.reduce(reducer, 0); // 3

上面代码中，数组actions表示依次有三个 Action，分别是加0、加1和加2。数组的reduce方法接受 Reducer 函数作为参数，就可以直接得到最终的状态3。

•  纯函数
  

  Reducer 函数最重要的特征是，它是一个纯函数。也就是说，只要是同样的输入，必定得到同样的输出。

  纯函数是函数式编程的概念，必须遵守以下一些约束。

不得改写参数
不能调用系统 I/O 的API
不能调用Date.now()或者Math.random()等不纯的方法，因为每次会得到不一样的结果

由于 Reducer 是纯函数，就可以保证同样的State，必定得到同样的 View。但也正因为这一点，Reducer 函数里面不能改变 State，必须返回一个全新的对象，请参考下面的写法。

 

// State 是一个对象
function reducer(state, action) {
  return Object.assign({}, state, { thingToChange });
  // 或者
  return { ...state, ...newState };
}

// State 是一个数组
function reducer(state, action) {
  return [...state, newItem];
}

最好把 State 对象设成只读。你没法改变它，要得到新的 State，唯一办法就是生成一个新对象。这样的好处是，任何时候，与某个 View 对应的 State 总是一个不变的对象。