Redux入门-第二篇 redux和react-redux结合实现页面内修改全局state

redux 和 react-redux结合实现页面内修改全局state

1.构建存储区

//store.js
import { createStore } from 'redux';
import rootReducer from './reducers';
//创建store
const store = createStore(rootReducer);
export default store;
//reducer.js
//其中rootReducer是多个qianReducer和otherReducer组成
import { qianCallback } from './handlers';
import { user } from './../state';
export const qianReducer = (state = user, action) => {
    return qianCallback(state, action);
};
export const otherReducer = (state = [ 1, 2, 3 ], action) => {
    return qianCallback(state, action);
};
const allReducer = {
    qianReducer,
    otherReducer
};
const rootReducer = combineReducers(allReducer);
export default rootReducer;
// handlers.js  数据处理的钩子函数
import { ADD, REDUCE } from './../actions/qianActions';
export const qianCallback = (state, action) => {
    switch (action.type) {
        case ADD: {
            return { ...state, qian: state.qian + action.payload };
        }
        case REDUCE: {
            return { ...state, qian: state.qian - action.payload };
        }
        default:
            return state;
    }
};
//qianActions.js 操作类型和触发函数,在视图里触发
export const ADD = 'ADD_ACTION';
export const REDUCE = 'REDUCE_ACTION';
export const addQian = (payload) => {
    return {
        type: ADD,
        payload
    };
};

export const reduceQian = (payload) => {
    return {
        type: REDUCE,
        payload
    };
};

2.注入全局

import store from './redux/store';
// Provider注入后,页面上才能使用数据
import { Provider } from 'react-redux';
ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);

3.页面中使用

import React from 'react';
import { connect } from 'react-redux';
import { Flex, Button } from 'antd-mobile';
//引入操作类型函数
import { addQian, reduceQian } from './../../redux/actions/qianActions';
class User extends React.Component {
    componentDidMount() {}
    addQian = () => {
        //触发加操作
        console.log(this.props.addQian);
        this.props.addQian(1);
    };
    reduceQian = () => {
        //触发减操作
        this.props.reduceQian(1);
    };
    render() {
        return (
            <div>
                <Flex>
                    <Flex.Item>姓名:{this.props.user.name}</Flex.Item>
                    <Flex.Item>年龄:{this.props.user.age}</Flex.Item>
                    <Flex.Item>余额:{this.props.user.qian}</Flex.Item>
                </Flex>
                <Button inline size="small" onClick={this.addQian}>
                    +
                </Button>
                <Button inline size="small" onClick={this.reduceQian}>
                    -
                </Button>
            </div>
        );
    }
}
// 将数据挂载到props上
const mapStateToProps = (storeState) => {
    return {
        user: storeState.qianReducer
    };
};
// 将操作类型函数挂载到props上,必须这么写,因为dispatch需要包裹的数据只能是对象等数据类型,不能是函数
const mapDispatchToProps = (dispatch) => ({
    addQian: (payLoad) => dispatch(addQian(payLoad)),
    reduceQian: (payLoad) => dispatch(reduceQian(payLoad))
});
// 将组件和redux连接全靠它
export default connect(mapStateToProps, mapDispatchToProps)(User);

注意:

发表评论

电子邮件地址不会被公开。 必填项已用*标注