编写利于维护的Redux

• 1 项目文件夹/src文件夹中新建store文件夹，新增store.js文件、reducer.js文件、constants.js文件、action.js文件

store.js文件

import {createStore} from "redux";
import reducer from "./reducer";
// 利用store来保存状态（state）
const store = createStore(reducer)
export default store // 暴露出来

reducer.js文件

import {
    ADD_COUNT,
    SUB_COUNT
} from './constants'
// 定义一个状态
let initialState = {
    count:0
}
// 利用reducer将store和action串联起来
function reducer(state = initialState, action) {
    switch (action.type) {
        case ADD_COUNT:
            return {count: state.count + action.num}
        case SUB_COUNT:
            return {count: state.count - action.num}
        default:
            return state
    }
}
export default reducer

constants.js文件

export const ADD_COUNT = 'ADD_COUNT' // 使用常量写操作类型，保证写错操作类型会报错
export const SUB_COUNT = 'SUB_COUNT'

action.js文件

import {
    ADD_COUNT,
    SUB_COUNT
} from './constants'
// 利用action来修改状态
// const addAction = {type:ADD_COUNT, num: 1}
// const subAction = {type:SUB_COUNT, num: 1}
export const addAction = (num) => { // 函数的写法，使action更加灵活
    return {type:ADD_COUNT, num: num}
}
export const subAction = (num) => {
    return {type:SUB_COUNT, num: num}
}

• 2 在App.js文件中使用数据

import React from 'react'; // 生成虚拟DOM
import store from "./store/store";
import {addAction, subAction} from "./store/action";

class App extends React.PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            count: store.getState().count // 获取数据
        }
    }
    componentDidMount() {
        store.subscribe(()=>{
            this.setState({
                count: store.getState().count
            })
        })
    }
    componentWillUnmount() {
        store.unsubscribe()
    }
    render(){
        return (
            <div>
                <p>{this.state.count}</p>
                <button onClick={()=>{this.btnClick()}}>增加</button>
                <button onClick={()=>{this.btnClick2()}}>减少</button>
            </div>
        )
    }
    btnClick(){
        store.dispatch(addAction(5))
    }
    btnClick2(){
        store.dispatch(subAction(1))
    }
}
export default App; // 暴露给外界