申明

网上原理讲解很多, 但涉及redux架构设计的却很少, 此总结教程通过以往项目经验与研究实验得出, 转载请注明出处.

包含完整的项目结构图与示例代码, 代码略有删减与过滤.

dva集成了redux/saga/mock/webpack配置等功能, 推荐试用.

资料推荐

如示例代码一知半解可以先看资料推荐的内容

• redux的github地址 🔗
• redux文档(英文) 🔗
• redux文档(中文翻译) 🔗
• redux简明教程 🔗
• react-redux阿里前端工程师讲解 🔗
• redux-actions的使用 🔗

项目目录结构(只包含redux用到的必要文件)

.
├── actions           # 数据处理, 并将最终数据交给reducers处理
│   ├── index.js
│   └── user.js
├── reducers          # 唯一修改store的地方, 必须返回nextState
│   ├── index.js
│   └── user.js
├── index.js          # 程序入口
├── App.js            # 示例组件
└── utils
    └── initStore.js  # 初始化store

文件内代码分析

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
import { Provider } from 'react-redux';
import initStore from './utils/initStore';

// 初始化store
const store = initStore();
window.store = store;
ReactDOM.render(
  <Provider store={store}>
    <App/>
  </Provider>,
  document.getElementById('root')
);

utils/initStore.js

• redux-promise是一个redux的中间件, 当actions返回数据为promise时提取数据, 相当于then操作后的数据提出

import { createStore, applyMiddleware } from 'redux';
import reducers from '../reducers';
import promiseMiddleware from 'redux-promise';

// store创建函数
export default (initialState = {}) => {
  const store = createStore(
    reducers,
    initialState,
    applyMiddleware(promiseMiddleware)
  )
  return store;
}

reducers/index.js

• combineReducers方法用于将多个reducer合成

import { combineReducers } from 'redux'
import user from './user';

export default combineReducers(
  user,
});

reducers/user.js

• handleActions方法用于将reducer与action对应

import { handleActions } from 'redux-actions';
import { myhandle, updatename } from '../actions/user';

export default handleActions({
  [myhandle]: (state, { payload }) => {
    return {
      ...state,
      userName: payload.name
    }
  },
  [updatename]: (state, { payload }) => {
    return {
      ...state,
      userInfo: payload.kk
    }
  }
}, {
  name: 'ct',
  userInfo: {}
})

写法等价于传统的

function(actions){
  switch(actions.type){
    case 'updatename':
      ...
  }
}

actions/index.js

• 此文件存在仅为actions提供统一的输出, 非必须

export * from './user';

actions/user.js

• 之前的redux-promise中间件用于此处, 当异步函数时, 即函数返回promise对象, 则自动提取数据
• 其中写法{ a, b } = createActions({A, B}), a 和 b为action向外提供的承载对象, A 和 B表示action对象下type属性的值

import { createActions } from 'redux-actions';

export const { myhandle, updatename } = createActions({
  MYHANDLE: param => param,
  UPDATENAME: async param => {
    let kk = await Api.get();
    return {...param, kk}
  }
});

写法等价于传统的

export const { myhandle, updatename } = {
  myhandle: (param) => ({
    type: 'MYHANDLE',
    payload: param
  }),
  updatename: *(param) => {
    ... promise handle ...
    return {
        type: 'UPDATENAME',
        payload: endData
    }
  }
}

App.js 绑定与使用

• store与组件的绑定通过connect方法实现, connect一共接受三个参数, 第一个为捆绑到组件的属性名与对应从store取出来的数据, 第二个参数为对应的reducer函数(即对应action操作), 全部捆绑到this.props里
• 需要注意更新state操作是非同步的, 同理更新store操作也是非同步的

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { myhandle, updatename } from './actions';

class App extends Component{
  updateName(){
    this.props.myhandle({name: 'hello'});
  }
  render (){
    return (
      <button onClick={() => this.updateName() }>{this.props && this.props.state.user.name}</button>
    )
  }
}

export default connect((state) => ({ state: state }), { myhandle, updatename })(App);