Redux使用教程

在开始之前，需要安装环境，node.js可以使用npm管理包，开发的工具webstorm可以创建相应的项目。

项目中redux是管理全局的同一个store，React-router是管理路由的，这里只使用了redux，react-router稍后介绍。

 

1、先创建一个简单的项目。安装对应的包redux、react-redux、redux-thunk（异步操作action时使用）

 

2、建立全局使用State，也就是store。

import {combineReducers} from 'redux';   //combineReducers作用可以将多个reducer合并成一个，

const counterReducer = (state = {value: 0}, action) => {
    //根据dispatch触发的action类型来修改对应state
    switch (action.type) {
        case 'add':
            state = {value: state.value + 1}
            break;
        case 'delete':
            state = {value: state.value - 1}
            break;
        default:
            break;
    }
    return state;
}

export default combineReducers({
    counterReducer  //这里是添加一个state值，也可以修改成 counter: counterReducer，这样在state中的key为counter来获取值
})

 

3、创建store

import {createStore, applyMiddleware} from 'redux';
import {createLogger} from 'redux-logger'; //日志有关
import thunk from 'redux-thunk';  //这个必须要引入到中间件中

import Init from './InitReduxCollection';  //这个是上面创建的reducer
const middleware = [thunk]; //与异步操作有关，必须要引入，不然报错

const store = createStore(Init, applyMiddleware(...middleware)); //applyMiddleware中间件，可以放入多个参数，日志中间件要放在最后
export default store

 

4、页面关联action和reducer

/**
 * Created by Administrator on 2019/1/2.
 */

import React, {Component} from 'react';
import {connect} from 'react-redux';  //这里要注意
import PropTypes from 'prop-types' 

import './home-page.css';

class HomePage extends Component {

    static propTypes = {
        value: PropTypes.number
    };

    addClick = () => {
        console.log('add....')
        let {Add} = this.props;
        Add();

    }
    deleteClick = () => {
        console.log('delete....')
        this.props.Delete()
    }
 
    render () {
        console.log(this.props)
 
        return <div className="home">
            <div>hello world   !!!! </div>

            <div className="button" onClick={this.deleteClick}>-</div> {this.props.value}  <div className="button" onClick={this.addClick}>+</div>
 
        </div>
    }
}

//这里是所有action的方法
const mapDispatchToProps = {
    //这里先不着急创建action，先把页面和state关联，然后创建action，在将对应的action放入就可以了，可以看到第七步创建action
    //Add,
    //Delete
}

//这里是将所有reducer的state转成关联页面的props,可以通过props来访问
const mapStateToProps = (state) => {
    console.log(state)  //这里打印会看到reducer合并的所有state
    return {
        ...state.counterReducer
    }
}

//将页面和全局的store关联
export default connect(mapStateToProps, mapDispatchToProps)(HomePage);

 

5、创建页面和store关联

import React , {Component} from 'react';
import {Provider} from 'react-redux'; //用于页面和全局store关联
import store from './page/Store';   //这个是上面第三步创建store
import HomePage from './page/Home/HomePage';  //对应的页面

export default class AppContainer extends Component {

    render () {
        return <Provider store={store}>
            <HomePage/>
        </Provider>
    }
}

 

6、修改显示页面，然后运行看看效果页面是否可以展示，此时action是不能触发，

ReactDOM.render(<AppContainer />, document.getElementById('root'));

 

7、创建action，然后可以将其关联到第四部中。

export const Add = (param) => (dispatch, getState) => {
    //这里参数dispatch是页面关联时，调用传入的参数，param是调用Add时传入的参数，dispatch调用时传入参数中type是必须的，其他的可以自己定义参数名，比如dispatch({type:'add', value:2})，这个dispatch触发add的reducer，action就是这里传入的参数
    dispatch({
        type: 'add'
    });
}

export const Delete = () => (dispatch, getState) => {
    dispatch({
        type: 'delete'
    });
}