redux入門指南

前言:大概一個月沒有寫博客了,這兩天正好是週末,就寫點東西來梳理下以前幾個月的所寫與所得;
兩個月前,學習了一下 redux ,仍是一點難度的,花了我一天的時間來搞明白他,
可是都沒怎麼記錄,今天這篇博客就是用一個demo來介紹 redux , react-redux , react-thunk 的簡單用法;

首先就是下載,使用命令:
npm install --save redux react-redux react-thunk
下好後 npm start 啓動;

文件夾列表以下:

redux 的最關鍵的函數就是 dispatch !
而 dispatch 的本質是什麼呢?
dispatch 接受的是一個對象,這個對象至少有一個是鍵值是用來判斷類型的,其他的能夠是任意的;
而他(其實也就是 reducer 函數)他自己有一個 state ,用來存儲初始值,根據接受到的對象中的類型鍵值來判斷對於當前值的不一樣操做,
並且他必須返回修改後的 state;

如今咱們建立好文件後修改 src/index.js::

import { createStore,applyMiddleware} from 'redux'
import thunk from 'redux-thunk'
import { Provider } from 'react-redux' 
import calcul from './redux/reducer';

let store = createStore(calcul,applyMiddleware(thunk));
ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));

上部的代碼中除了 reactDOM.render 是修改的,其餘都是新添加的;
這裏咱們是引用了 redux, redux-thunk, react-redux模塊和一個 reducer 文件;
講一下 createStore 的做用,他在官方文檔中的釋義是這樣的:

建立一個 Redux store 來以存放應用中全部的 state。
應用中應有且僅有一個 store。

其實這只是一個聲明賦值,而若是你不用中間件(thunk)能夠這樣寫:
let store = createStore(calcul);
一會兒簡單了不少;
而 Provider 這個html的標籤就是將 redux 的值和函數,傳遞給整個項目;

上面說到了 create那咱們先建立 reducer/index.js:

import { combineReducers } from 'redux'
const countReducer = (state = 0, action) => {
    switch (action.type) {
        case 'INCREMENT': return state + action.data;
        case 'DECREMENT': return state - action.data;
        default: return state;
    }
};

const calcul = combineReducers({
    countReducer
});

export default calcul;

combineReducers 是一個語法糖:他的做用就是將多個reducer函數合併成一個對象;
上面的 countReducer 就是一個reducer函數了,就像我上面所說的,action就是接受的那個對象,
而state就是他自帶的初始值,經過switch操做,根據 action.type 的值來進行不一樣的操做,
可是也是最重要的就是必須有返回值;

接下來是修改src/App.js:

import React, { Component } from 'react';
import {connect} from 'react-redux';
import Calculation from './components/calculation';

class App extends Component {
  render() {
      const {dispatch,countNum} = this.props;
      return (
      <div className="App">
          <Calculation getValue={countNum} dispatch={dispatch}></Calculation>
      </div>
    );
  }
}
function showData(state) {
    return {
        countNum:state.countReducer
    }
}
export default connect(showData)(App);

connect 函數是來自 react-redux 的,他是一個很是重要的函數,
在最下面一行代碼中:connect(showData)(App);
第一個接受的是一個對象,在 showData 中, state 就是全部 reducer 的初始值;
經過這個函數將當前的組件與 redux 中的數值掛鉤,他返回的是當期組件所須要的 reducer 的值(你也能夠對值進行filter),
而第二個接受對象呢,就是當前組件了;
能夠看到,咱們還引用了一個名爲 Calculation 的組件,他接收了來自 redux 的 dispatch , countNum 這兩個參數(函數);

在下一個文件是 src/components/calculation.js:

import React, { Component } from 'react';
import {DECREMENT,middleINCRENT} from '../redux/action';

export default class Count extends Component {
    constructor(props) {
        super(props);
        this.state = {
            changeVal:1
        }
    }

    input = (e)=>{
        this.setState({changeVal: Number(e.target.value)});
    };

    render() {
        let {dispatch,getValue} = this.props;
        return <div>
            this is calculation
            <h1>{getValue}</h1>
            <input type="text" onChange={this.input} value={this.state.changeVal} />
            <button onClick={() => (dispatch(middleINCRENT(this.state.changeVal)))}>+</button>
            <button onClick={() => (dispatch(DECREMENT(this.state.changeVal)))}>-</button>
        </div>
    }
}

這個文件引用了文件:src/redux/action/index.js裏的 DECREMENT , middleINCRENT 兩個函數;
其中 middleINCRENT 即是添加了中間件的 action 函數;
這個組件的做用是什麼呢:就是根據 input 裏的值,來改變 redux 裏的 countReducer 的初始值,靠着點擊按鈕來觸發;
dispatch 我先不說,先說下 DECREMENT , middleINCRENT ,而這就不得不提到下面這個文件:

src/redux/action/index.js:

export function INCREMENT(data){
    return {
        type:'INCREMENT',
        data
    }
}
export function middleINCRENT(data) {
    return (dispatch, getState) => {
        const currentValue = getState();
        if(currentValue.countReducer >=200){
            return false;
        }
        dispatch(INCREMENT(data));
    }
}
export function DECREMENT(data) {
    return {
        type:'DECREMENT',
        data
    }
}

如今大家知道中間件的做用了麼?他就是在提交值的時候,對值進行統一的判斷和修改, 能夠在這個地方進行ajax操做;
咱們看這個文件裏的 INCREMENT 和 DECREMENT 函數,這兩個 函數返回的值就是我最開始所說的, dispatch 所接收的值,
能夠看到 type 便是判斷的類型了,而 data 呢,就是組件 caculation.js 裏的 input 的值;

如今看中間件 middleINCRENT 這個函數,他是返回一個函數,而這個函數能夠接受到兩個參數,一個呢是 dispatch 函數,而另一個呢是當前的 reducer 函數的值;

經過學習這個組件, redux 的基本流程能夠掌握了,固然實際項目中並不會這麼簡單,可是原理就是這樣;

最後我將這個 demo 放在了GitHub: https://github.com/Grewer/reduxDemo
若是幫到了你,還請推薦或者 star;

完;