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 (
           <div>
               <h2>这是淘宝详情页</h2>
               <p>当前购物车内商品数量：{store.getState().goods.length}</p>
            <button onClick={() => store.dispatch({type: 'add', good: {title: `淘宝商品${Date.now()}`, price: 100}})}>添加购物车</button>
        </div>
       )
   }
   
   // 天猫商品详情组件
   function TmItem() {
       return (
           <div>
               <h2>这是天猫详情页</h2>
               <p>当前购物车内商品数量：{store.getState().goods.length}</p>
            <button onClick={() => store.dispatch({type: 'add', good: {title: `天猫商品${Date.now()}`, price: 200}})}>添加购物车</button>
        </div>
       )
   }
   
   // 购物车组件
   function Cart() {
       let goods = store.getState().goods
       return (
           <ul>
           {
               goods.map((good, index) => {
                return (
                    <li key={index}>
                        <span>{good.title}</span>
                        <button onClick={() => store.dispatch({type: 'delete', good: {index}})}>删除</button>
                    </li>
                )
            })
        }
        </ul>
    )
   }
   
   // 使用 react-router-dom 配置两个页面
   function App() {
     return (
       <div className="App">
         <div>
             <Link to="/tb">淘宝</Link> | 
             <Link to="/tm">天猫</Link> 
         </div>
         
         <Route path="/tb" component={TbItem}></Route>
         <Route path="/tm" component={TmItem}></Route>
         <Cart></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>
               <App />
           </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(
       <BrowserRouter>
           <Provider store={store}>
               <App />
           </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 则有三种实现方案：

   • 使用父子组件通信的方法，通过 <Provider></Provider> <Consumer></Consumer> 实现；

   • 同样用 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。

Reducer里只能接收state，不能改变state

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 总是一个不变的对象。