最簡單的redux,react-redux示例——手把手教你學會react-redux分模塊存儲

一，下載redux,react-redux,prop-types

npm install --save prop-types
npm install --save redux
npm install --save react-redux

二、下面是項目目錄結構

三，index.js或者app.js文件配置

import React from 'react';
import ReactDOM from 'react-dom';
import './index.less';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { Provider } from "react-redux";
import store from "./redux/store";
ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>, 
    document.getElementById('root')
);
serviceWorker.unregister();

這裏主要引入Provider組件，以及redux store對象，react-redux 的Provider組件包裹在根組件外層，使所有的子組件都可以拿到state

四、store.js文件配置

import {createStore} from 'redux';
import RootReducers from './reducers/index';

const store = createStore(RootReducers);

export default store;

createStore可以簡單理解創建一個倉庫，是整個redux狀態管理的靈魂，它有三個參數可以選擇，這裏只接收一個reducers對象，因爲示例是多模塊管理，所以這裏會有一個總的reducers    RootReducers,如果只有一個reducers，只需直接引入，然後用createStore創建即可

五、在reducers文件夾下建一個index.js,用來管理我們所有的reducers

import { combineReducers } from 'redux';
//reducers
import ColorReducers from "./colorReducers";

const allReducers = {
    ColorReducers
};

const rootReducers = combineReducers(allReducers);

export default rootReducers

注意，這裏引入了一個combineReducers方法，用來整合我們所有的reducers,如果僅僅只有一個reducer,可以直接通過createStore創建

六、colorReducers.js是我們一個主題色管理模塊的reducer,可以看做一個倉庫的一個車間，在這裏我們將管理我們的主題色

import themeColor from "./../state/colorReducers";
const colorReducers = (state = {...themeColor}, action) => {
    if (!state) return {
      themeColor: 'red'
    }
    switch (action.type) {
      case 'CHANGE_COLOR':
        return { ...state, themeColor: action.themeColor }//這裏action傳入動態色值並同步到state
      default:
        return state
    }
}
export default colorReducers

reducer接收兩個參數，一個是我們該模塊所有的狀態state,一個是action，通過們所傳入的值，動態改變state,注意，這裏state必須返回，不可以返回undefined或者null，在代碼中我們引入了一個themeColor，這裏是我們所有聲明的主題色

export default {
    themeColor: "green"
}

七、經過以上流程，我們已經基本可以把react-redux配置完成接下來我們將進行如何獲取satate以及如果改變state,子組件1示例如下

import React, { Component } from 'react';
import { Button } from 'antd';
import './index.less';

import PropTypes from 'prop-types'
import { connect } from 'react-redux'

class App extends Component {
  static propTypes = {
    themeColor: PropTypes.string,
    onSwitchColor: PropTypes.func
  }
  constructor() {
    super()
    this.state = { themeColor: '' }
    this.clickname = this.clickname.bind(this)
  }
  handleSwitchColor (color) {
    if (this.props.onSwitchColor) {
        // dispatch action 去改變顏色
        this.props.onSwitchColor(color)
    }
  }
  render() {
    return (
      <div>
         <p style={{ color : this.props.themeColor }}>color change</p>
        <Button 
          style={{ color: this.props.themeColor }}
          onClick={this.handleSwitchColor.bind(this,'red')}>Red</Button>
        <Button 
          style={{ color: this.props.themeColor }}
          onClick={this.handleSwitchColor.bind(this,'blue')}>Blue</Button>
      </div>
    );
  }
}
const mapStateToProps = (state) => {
  return {
    themeColor: state.ColorReducers.themeColor
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
      onSwitchColor: (color) => {
          dispatch({ type: 'CHANGE_COLOR', themeColor: color })
      }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(App);

在文件中我們主要引入了PropTypes，connect，PropTypes校驗可自行百度，這裏不用也可以，主要是connect,它是連接我們react 組件和倉庫store的中樞，當你組件需要用到redux時可以通過connect(...)(組件名)的形式導出，它接收兩個參數——mapStateToProps和mapDispatchToProps，mapStateToProps可以簡單理解爲獲取到我們的state狀態，它接收一個state參數，返回一個對象，可以通過(state+模塊名+狀態名) 的形式來獲取，mapDispatchToProps可以簡單的理解爲更新state狀態，它也是接收一個參數dispatch，返回一個對象，該對象的字段值爲我們要觸發的方法，並通過dispatch更新。

到這裏我們已經可以感受一下react+redux的魅力啦，趕快去試試吧。