react--redux状态管理

佚名 5年前 (2019-04-23) 随笔 695人围观抢沙发百度已收录

为了解决组件嵌套太深的问题状态管理的概念在前端横空出世，本文使用redux作为例子，先安装两个包
"react-redux": "^7.0.2", "redux": "^4.0.1"，   npm install redux react-redux --save

新增pages/reduxComponent.js, 内容如下

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

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);

新增redux/active/cartActive.js, 内容如下

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} } };

新增redux/reducers/cardReducers.js, 内容如下

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; } }

新增redux/reducers/index.js, 内容如下

import {combineReducers} from 'redux'; import CartReducers from './cartReducers'; const allReducers = { CartReducers }; const rootReducers = combineReducers(allReducers); export default rootReducers

新增redux/store.js, 内容如下

import {createStore} from 'redux'; import RootReducers from './reducers'; const store = createStore(RootReducers); export default store;

主入口index.js修改如下

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();


route/index.js修改如下

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