react 创建项目 redux（详细）

安装

yarn add react-redux redux

Router.js修改

1、引入
import {Provider} from 'react-redux';
2、引入store
import Store from './store/store.js';
3、入口注入
<Provider store={Store}></Provider>

全部代码如下
import React from 'react';

import { BrowserRouter, HashRouter, Route, Link, Switch } from 'react-router-dom';
import App from './App.js';

import {Provider} from 'react-redux';

import Store from './store/store.js';

// console.log(Store.getState())
const Router = () => (
    <BrowserRouter>
        <Provider store={Store}>
            <App/>
        </Provider>
    </BrowserRouter>
)
export default Router;

在src下创建store文件夹再创建store.js

react/react-scss-router/src/store/store.js
import {createStore, combineReducers} from 'redux';

import {reducer as addReducer} from '../views/Action/_index.js';
// import {reducer as testReducer} from '../views/Test/_index.js';
// import {reducer as delReducer} from '../views/Test/_index.js';
const reducer = combineReducers({
    add:addReducer,
    // testList:testReducer,
    // remove:removeReducer,
    // edit:editReducer,
})

export default createStore(reducer);

以下在views里创建

react/react-scss-router/src/views/Action/redux/Actions.js
import * as ActionTypes from './ActionTypes';
// import {a,b,c,d} from './ActionTypes';
// ActionTypes.a
// ActionTypes.b
// ActionTypes.c
// {
//     type:ActionTypes.ADD_TODO,
//     text:'第一个demo'
// }
export const add = () =>{
    return{
        type:ActionTypes.ADD_TODO,
        text:'第一个demo'
    }
}

react/react-scss-router/src/views/Action/redux/ActionTypes.js
export const ADD_TODO = 'ADD_TODO';
export const DEL_TODO = 'DEL_TODO';
export const EDIT_TODO = 'EDIT_TODO';

react/react-scss-router/src/views/Action/redux/Reducer.js
import * as ActionTypes from './ActionTypes';

export default (state=[],action)=>{
    switch (action.type) {
        case ActionTypes.ADD_TODO:
            return [
                {
                    type:action.type,
                    text:action.text
                },
                ...state
            ]
        default:
            return state;
    }

}

_index.js 是几乎不用再改变的js 文件

react/react-scss-router/src/views/Action/_index.js
import * as actions from './redux/Actions.js';
import reducer from './redux/Reducer.js';
export {actions,reducer};

页面

react/react-scss-router/src/views/Action/index.jsx
直接使用 dispatch
import React , { Component } from 'react';
import {connect} from 'react-redux';

import {actions} from './_index.js';
import { withRouter,NavLink,Switch,Redirect,Route} from 'react-router-dom';

class View extends Component {
    // changeName(){
    //
    // }
    onAddFn(){
        const {dispatch} = this.props;
        dispatch(actions.add())
    }
    render(){
        console.log(this.props.addList)
        const {addList,onAddFn,dispatch} = this.props;
        return (
            <React.Fragment>
                {addList.length}<br/>
                action页面<br/>
                {/*<input type="button"
                value="点我"
                onClick={onAddFn}
                />*/}
                <NavLink to="/">首页</NavLink>
                <NavLink to="/action">action</NavLink>
                <input type="button"
                value="点我"
                onClick={()=>{this.onAddFn()}}
                />
            </React.Fragment>
        )
    }
}
function mapStateToProps(state) {
    console.log(state)
    // this.props.addList
    // {
    //     add:[],
    //     del:[]
    // }
    return {
        addList:state.add
    }
}
// const mapDispatchToProps = (dispatch, ownProps) => {
//     // {
//     //     type:'ADD_TODO'
//     // }
//     // dispatch(actions.add())
//     return {
//         onAddFn:()=>dispatch(actions.add())
//     }
// };
export default connect(mapStateToProps,null)(View);

以上基本完成

另一种使用dispatch的方式

react/react-scss-router/src/views/Action/index0.jsx
另一种使用dispatch的方式
import React , { Component } from 'react';
import {connect} from 'react-redux';

import {actions} from './_index.js';

class View extends Component {
    // changeName(){
    //
    // }
    render(){
        console.log(this.props.addList)
        const {addList,onAddFn} = this.props;
        return (
            <React.Fragment>
                {addList.length}<br/>
                action页面<br/>
                {/*<input type="button"
                value="点我"
                onClick={onAddFn}
                />*/}
                <input type="button"
                value="点我"
                onClick={()=>{onAddFn()}}
                />
            </React.Fragment>
        )
    }
}
function mapStateToProps(state) {
    console.log(state)
    // this.props.addList
    // {
    //     add:[],
    //     del:[]
    // }
    return {
        addList:state.add
    }
}
const mapDispatchToProps = (dispatch, ownProps) => {
    // ownProps 父组件有任意参数 
    // const {name} = ownProps;
    // this.props.name
    // {
    //     type:'ADD_TODO'
    // }
    // dispatch(actions.add())
    return {
        onAddFn:()=>dispatch(actions.add())
    }
};
export default connect(mapStateToProps,mapDispatchToProps)(View);

类组件中使用redux

react/react-scss-router/src/views/Home/index.jsx
import React , { Component } from 'react';
import { withRouter,NavLink,Switch,Redirect,Route} from 'react-router-dom';
import {connect} from 'react-redux';

class View extends Component {
    render(){
        const {addList} = this.props;
        return (
            <React.Fragment>
                {addList.length}
                <div className="mian">这是首页面</div>
                <NavLink to="/">首页</NavLink><br/>
                <NavLink to="/action">action</NavLink>
            </React.Fragment>
        )
    }
}
const mapStateToProps = (state)=> {
    return {
        addList:state.add
    }
}
export default connect(mapStateToProps,null)(View);

函数组件中使用 redux

react/react-scss-router/src/views/Action2/index.jsx
import React, {useState,useEffect} from 'react';
import { useSelector, useDispatch } from "react-redux";
import {actions} from '../Action/_index';
const View = (props)=>{
    const state = useSelector((state)=>state);
    const add = useSelector((state)=>state.add);
    const dispatch = useDispatch();
    useEffect(()=>{
        dispatch(actions.add())
        // dispatch({
        //     type:"ADD_TODO"
        // })
    },[])
    return(
        <div>{add.length}</div>
    )
}
export default View;