react--redux状态管理

import React, { Component } from ‘react‘;
import { connect } from ‘react-redux‘;
import { addCart, updateCart, deleteCart }  from ‘../redux/action/cartAction‘;


const mapStateToProps = (state) => {
    return {
        cart: state.CartReducers.cart
    }
};
const mapDispatchToProps = (dispatch) => {
    return {
        addCart: (...args) => dispatch(addCart(...args)),
        updateCart: (...args) => dispatch(updateCart(...args)),
        deleteCart: (...args) => dispatch(deleteCart(...args))
    }
};

class ReduxComponent extends Component {
    constructor(props){
        super(props);
        this.state = {
            count: 0,
        }
    }

    add = () => {
        const {count} = this.state;
        const newCount = count+1;
        this.props.addCart(‘a‘+ newCount, 2, 500, newCount);
        this.setState({
            count: newCount
        })
    };

    update = (id) => {
        const {count} = this.state;
        this.props.updateCart(‘b‘ + count, 3, 900, id)
    };

    delete = (id) => {
        this.props.deleteCart(id)
    };

    render() {
        return (
            <div style={{width:500, textAlign:‘center‘, margin: ‘30px auto‘}}>
                {
                    this.props.cart && this.props.cart.map((el, index) => {
                        return (
                            <div key={index}>
                                <p>
                                    {el.name} => {el.num} => {el.weight}
                                    <button onClick={this.update.bind(this, el.id)}>更新</button>
                                    <button onClick={this.delete.bind(this, el.id)}>删除</button>
                                </p>
                            </div>
                        )
                    })
                }
                <button onClick={this.add}>添加</button>
            </div>
        );
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(ReduxComponent);

const ADD_CART = ‘ADD_CART‘;
const UPDATE_CART = ‘UPDATE_CART‘;
const DELETE_CART = ‘DELETE_CART‘;

export const addCart = (name, num, weight, id) => {
    return {
        type: ADD_CART,
        payload: {name, num, weight, id}
    }
};

export const updateCart = (name, num, weight, id) => {
    return {
        type: UPDATE_CART,
        payload: {name, num, weight, id}
    }
};

export const deleteCart = (id) => {
    return {
        type: DELETE_CART,
        payload: {id}
    }
};

const initState ={
    cart: []
};

export default function(state=initState, action) {
    switch (action.type) {
        case ‘ADD_CART‘:
            return {
                ...state,
                cart: [...state.cart, action.payload]
            };
        case ‘UPDATE_CART‘:
            return {
                ...state,
                cart: state.cart.map(el => el.id === action.payload.id ? action.payload : el)
            };
        case ‘DELETE_CART‘:
            return {
                ...state,
                cart: state.cart.filter(el => el.id !== action.payload.id)
            };
        default:
            return state;
    }
}

import {combineReducers} from ‘redux‘;
import CartReducers from ‘./cartReducers‘;

const allReducers = {
    CartReducers
};

const rootReducers = combineReducers(allReducers);

export default rootReducers

import {createStore} from ‘redux‘;
import RootReducers from ‘./reducers‘;

const store = createStore(RootReducers);

export default store;

import React from ‘react‘;
import ReactDOM from ‘react-dom‘;
import {HashRouter as Router} from ‘react-router-dom‘;
import { Provider } from ‘react-redux‘;
import store from ‘./redux/store.js‘;
import ‘./index.css‘;
// import App from ‘./App‘;
import routers from ‘./route‘;
import * as serviceWorker from ‘./serviceWorker‘;

ReactDOM.render(
    <Provider store={store}>
        <Router>{routers}</Router>
    </Provider>
    , document.getElementById(‘root‘));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

import React from ‘react‘;
import {Switch, Route} from "react-router-dom";
import asyncComponent from ‘../lazy‘;

import Home2 from ‘../pages/Home2‘;
import OnePage from ‘../pages/OnePage‘;
import TwoPage from ‘../pages/TwoPage‘;
import This from ‘../pages/This‘;
import Mount from ‘../pages/Mount‘;
import HooksTest1 from ‘../hooks/test1‘;
import AxiosTest from ‘../pages/AxiosTest‘;
import Refs from ‘../pages/Ref‘;
import ReduxComponent from ‘../pages/reduxComponent‘;
//import HooksUseState from ‘../hooks/useState‘;
const HooksUseState = asyncComponent(() => import (‘../hooks/useState‘));


const Routers = (
    <Switch>
        <Route path="/" exact component={Home2} />
        <Route path="/onePage" component={OnePage} />
        <Route path="/twoPage/:id" component={TwoPage} />
        <Route path="/this" component={This} />
        <Route path="/mount"  component={Mount} />
        <Route path="/hooksTest1" component={HooksTest1} />
        <Route path="/axiosTest" component={AxiosTest} />
        <Route path="/refs" component={Refs} />
        <Route path="/reduxComponent" component={ReduxComponent} />
        <Route path="/hooksUseState" component={HooksUseState} />
    </Switch>
);

export default Routers