react中简单使用redux

如果你一点不熟悉redux，看看这个http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html

项目搭建好之后，安装一下依赖，安装一下redux 和 react-redux

在src目录下建一个redux文件夹，在redux文件夹下建action文件夹和reducer文件夹，分别放我们的action和reducer

1，首先编写我们的action。 action 描述当前发生的事情，改变 State 的唯一办法，就是使用 action ，它会运送数据到 Store。在action文件夹下建一个action.js文件，写的内容如下

export const TYPE_ONE = 'TYPE_ONE';
export const TYPE_TWO = 'TYPE_TWO';
export const TYPE_ALERT = 'TYPE_ALERT';
/*export function typeOne(index) {
    return {type:TYPE_ONE,data:index}
}

export function typeTwo(index) {
    return {type:TYPE_TWO,data:index}
}*/

export function typeOne(dispatch,index) {
    dispatch ({type:TYPE_ONE, data:index})
}

export function typeTwo(dispatch,index) {
    dispatch ({type:TYPE_TWO, data:index})
}

export function doAlert(dispatch,text) {
    dispatch({type:TYPE_ALERT, data:text})
}

这里面，在创建函数的时候，把dispatch当做参数传给了函数，在函数里直接发起dispatch。dispatch接受一个 action对象作为参数，将它发送出去。

 

2，然后编写我们的reducer。store收到 action以后，必须给出一个新的 state，这样 View 才会发生变化。这种 State 的计算过程就叫做 reducer。reducer是一个函数，它接受 action和当前 state作为参数，返回一个新的 state。

在reducer文件中建了三个文件，doAlert.js、doCounter.js 和 index.js。doAlert和doCounter是两个reducer，index是将他俩合并在一起，当然你也可以在一个文件中写多个reducer，只是reducer太多了就不好管理了，所以可以分开写，最后再合并在一起。

doAlert.js文件如下：

import {TYPE_ALERT} from '../action/action';

export default function doAlert(state = null, action) {
    switch (action.type){
        case TYPE_ALERT:
            return state = action.data;
        default:
            return state;
    }
}

doCounter.js文件如下：

import {TYPE_ONE,TYPE_TWO} from '../action/action';

const defaultValue={
    counter:0
};
export default function doCounter(state = defaultValue, action) {
    console.log(state);
    switch (action.type){
        case TYPE_ONE:
            return Object.assign({},state,{counter:state.counter + action.data});
        case TYPE_TWO:
            return Object.assign({},state,{counter:state.counter - action.data});
        default:
            return state;
    }
}

index.js文件如下：

import doCounter from './doCounter';
import doAlert from './doAlert';
import { combineReducers } from 'redux'


export default combineReducers({
    doCounter,
    doAlert
})

这里使用redux提供的combineReducers方法来合并多个reducer，然后抛出。

3，我们需要在入口的js文件中创建store并在全局绑定store，src下的index.js文件修改如下：

import '@/css/pub.css';
import 'antd/lib/index.css';

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import Routes from './router/router.js';
import {createStore} from 'redux';

import counter from 'src/redux/reducer/index'

import {Router} from 'react-router-dom'
import history from 'src/history/index'

const store = createStore(counter);


ReactDOM.render(
    <div>
        <Provider store={store}>
            <Router history={history}>
                <Routes>
                </Routes>
            </Router>
        </Provider>
    </div>,
    document.getElementById('root')
);

这里面使用到了react-redux的Provider标签 和 redux的createStore方法，createStore用来创建store，参数我们的reducer，最后在Provider标签上全局绑定store。

4，下面就是如何使用了，建了一个counter.js的文件，如下：

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {typeOne,typeTwo,doAlert} from 'src/redux/action/action'

class Counter extends Component {
    constructor(props){
        super(props);
    }

    increment(index){
        //this.props.dispatch(typeOne(index))
        typeOne(this.props.dispatch,index)
    }

    decrement(index){
        //this.props.dispatch(typeTwo(index))
        typeTwo(this.props.dispatch,index)
    }
    doAlert(text){
        doAlert(this.props.dispatch,text);
    }

    render() {
        const {s} = this.props;
        let text = this.props.text ? this.props.text : '点我alert';
        return (
            <p style={{fontSize:'18px'}}>
                Clicked: {s.counter} 次&nbsp;&nbsp;
                <button onClick={()=>{this.increment(1)}}>点我+</button>&nbsp;&nbsp;
                <button onClick={()=>{this.decrement(1)}}>点我-</button>&nbsp;&nbsp;
                <button onClick={()=>{this.doAlert('你点我了！')}}>{text}</button>&nbsp;&nbsp;
            </p>
        )
    }
}

export default connect(
    state => ({
        s:state.doCounter,
        text:state.doAlert
    })
)(Counter)

使用的时候，要引入react-redux的connect方法，同时引入我们定义好的action方法。

在最后抛出页面的时候必须使用connect方法连接，connect的写法有多种，具体可以自己去看一下文档。在页面调用我们写好的action方法就可以改变state中的值了，页面也会重新渲染了。

这是redux的简单使用，很多地方我也在学习中，github代码地址：https://github.com/leileibrother/react-redux