react-redux

index.js

import store from './store';
import { Provider } from './react-redux';
ReactDOM.render(
    <Provider store={store}>
        <Counter1 />
        <Counter2 />
    </Provider>, document.getElementById('root'));

store/index.js

• 容器盒子

import { createStore, applyMiddleware } from '../redux';
import combinedReducer from './reducers';
import logger from './redux-logger';
import thunk from './redux-thunk';
import promise from './redux-promise';
let store = applyMiddleware(thunk, promise, logger)(createStore)(combinedReducer);

合并reducers

• reducers/index.js

import { combineReducers } from '../../redux';
import counter1 from './counter1';
let reducers = {
    counter1,//每个reducer都有自己的状态，都有自己的能响应的动作，
}
//combineReducers可以把多个reducer 函数组件的对象合并成一个reducer,
//合成之后会返回一个总的reducer,总的reducer里面会包含一个整的state
let combinedReducer = combineReducers(reducers);
export default combinedReducer;

//合并后的状态和reducers样子差不多
/* let combinedState = {
    counter1: { number: 0 },
} */

单独的reducers

• reducers/counter1.js

import * as actionTypes from '../action-types';
function add2(amount) {
    return { type: actionTypes.ADD2, payload: { amount } };
}
function minus2() {
    return { type: actionTypes.MINUS2 };
}
const actionCreators = { add2, minus2 };
export default actionCreators;

action-type.js

• 动作定义器

export const ADD1 = 'ADD1';

actionCreators/counter1.js

• 动作创建器
• 在组件中触发

import * as actionTypes from '../action-types';
function add2(amount) {
    return { type: actionTypes.ADD2, payload: { amount } };
}
function minus2() {
    return { type: actionTypes.MINUS2 };
}
const actionCreators = { add2, minus2 };
export default actionCreators;

在类组将中使用

import React from 'react';
import actionCreators from '../store/actionCreators/counter1';
import { connect } from '../react-redux';
class ClassCounter extends React.Component {
    render() {
        return (
            <div>
                <p>{this.props.number}</p>
                <button onClick={() => this.props.add2(5)}>+</button>
                <button onClick={this.props.minus2}>-</button>
            </div >
        )
    }
}
//把仓库中的状态映射为此组件的属性对象
const mapStateToProps = (state) => state.counter1;//{number:0}
export default connect(mapStateToProps, actionCreators)(ClassCounter);

在函数组将中使用

import React from 'react'
import {useSelector, useDispatch} from '../react-redux';
import actionCreators from '../store/actionCreators/counter1';

function Counter1() {
    //useSelector 替换是connect mapStateToProps
    let {number} = useSelector(state => state.counter1);
    let dispatch = useDispatch();//store.dispatch
    const {add1, minus1, thunkAdd} = actionCreators
    return (
        <div>
            <p>{number}</p>
            <button onClick={() => dispatch(add2())}>+</button>
            <button onClick={() => dispatch(minus2())}>-</button>
        </div>
    )
}

export default Counter1;