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;

完;