react使用redux react-redux

https://blog.csdn.net/weixin_34191845/article/details/93167825

// 1.
// store/action-types.js
// Counter组件用到的types
export const ADD = 'ADD';
export const MINUS = 'MINUS';

// 2.store/actions/counter.js
import * as types from '../action-types';
// 返回一个包含不同类型的对象
export default {
    add(count) { // 加数字
        return {type: types.ADD, count};
    },
    minus(count) {  // 减数字
        return {type: types.MINUS, count};
    }
}

// 3.store/reducers/counter.js
// 引入你组件需要的type
import * as types from '../action-types';
// 初始化状态
const initState = { number: 0 };
function counter(state = initState, action) {
    switch(action.type) {
        case types.ADD:
            return { number: state.number + action.count };
        case types.MINUS:
            return { number: state.number - action.count };
        default:
            return state;
    }
    return state;
}
export default counter;

// 在reducers里创建一个index.js文件，用来合并reducer
// 4.每个组件单独一个reducer文件（纯函数文件）
// combineReducers方法就是专门用来合并不同的reducer的
import { combineReducers } from 'redux';
// 引入关于Counter组件的reducer
import counter from './counter';
// 引入其他的reducer
import list from './list';
 
// 合并开始
export default combineReducers({
    counter,
    list
});

// 5.store目录下面创建index.js
// 引入redux提供的createStore方法来创建仓库
import { createStore } from 'redux';
// 引入所有用到的reducer
import reducer from './reducers'; // 纯函数的合并文件
 
const store = createStore(reducer);
export default store;

// 6.将store注入全局
// index.js
import React from 'react';
import { render } from 'react-dom';
import Counter from './components/Counter';
// Provider是个组件，有容乃大包容万物，不过只能有一个子元素
import { Provider } from 'react-redux';
import store from './store';
 
render(
    <Provider store={stroe}>
        <React.Fragment>
            {/* 如果有多个组件，就必须用React.Fragment组件来包裹，它不会产生多余的标签元素，和vue的template类似 */}
            <Counter />
        </React.Fragment>
    </Provider>, 
    document.getElementById('root')
);