Redux Flow pic:

项目结构图: 

安装 Redux:

npm install redux

npm install react-redux

npm install redux-thunk

create-react-app --version = 3.3.0

constant.js

export const Increment="Increment";

export const Decrement="Decrement";

actions：

import {Increment,Decrement} from "../constant"

//export const IncrementAction = (count) => ({type:Increment,count:count})

//export const IncrementAction = (count) => {

    //console.log('IncrementAction...',count);

   // return {type:Increment,count:count};

//}

--------- op 是一个函数 op() 调用就可以获取 store中的 state 对象

参考用法:https://github.com/wuyuan2009123/react-redux-example

 和下图的 mapStateToProps 参数的 state 是一样的输出

export const IncrementAction = count => (dispatch, op) => {

    console.log('IncrementAction...',count,'result',op());

    return {type:Increment,count:count};

  }

export const DecrementAction = (count) => ({type:Decrement,count:count})

reducer：

import {Increment,Decrement} from "../constant"

const initialState= {

    count:0,

};

export default function reducer(state = initialState, action) {

    switch (action.type) {

        case Increment:

            var oldstate = JSON.parse(JSON.stringify(state));

            console.log('old',oldstate);

            var newdata = {...state, count: state.count + action.count*1}

            console.log('newdata',newdata);

            return newdata;

        case Decrement:

            newdata = {...state, count: state.count - action.count*1}

            return newdata;

        default:

            return state;

    }

}

store：

import {createStore,applyMiddleware,combineReducers,compose} from 'redux'

import reducer  from './reducers/count'

import thunk from 'redux-thunk';

const composeEnhancers =

  typeof window === 'object' &&

  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?  

    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({

      // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...

    }) : compose;

    const enhancer = composeEnhancers(

        applyMiddleware(thunk),

        // other store enhancers if any

      );

const storeTree = combineReducers({

    countReduce:reducer,

})

export default createStore(storeTree

    ,

    enhancer

    );

index.js :

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

import { Provider } from 'react-redux';

import store from './store/store'

ReactDOM.render(

  <Provider store={store}>

    <App />

  </Provider>,

  document.getElementById('root')

);

App.js:

import React, { Component } from 'react'

import Header from './compoments/Header'

import Count from './compoments/Count'

export default class App extends Component {

  render() {

    return (

      <div>

        ................

        <Header />

        <hr/>

        <Count />

      </div>

    )

  }

}

Count 和 CountUI 组件： 

import React, { Component } from 'react'

import { IncrementAction,DecrementAction } from '../../store/actions/count';

import { connect } from 'react-redux';

class CountUI extends Component {

    inc = () => {

        console.log('CountUI inc',this.props);

        this.props.add(1);

    }

    decr = () => {

        this.props.jian(1);

    }

    render() {

        return (

            <div>

                求和为:{this.props.cc}<br />

                <button onClick={this.inc} >加</button>

                <button onClick={this.decr}>减</button>

            </div>

        )

    }

}

---------------------------------------测试用--------------------

const mapDispatchToProps = (dispatch, ownProps) => {

    return {

        add: (cn) => {

            console.log('mapDispatchToProps[ownProps]:', ownProps);

            dispatch(IncrementAction(cn))},

        jian:(cn) => dispatch(DecrementAction(cn))

    }

}

---------------------------------------测试用--------------------

const Count =  connect(

    state => {

        console.log('connect...',state);

        return {cc:state.countReduce.count}

        },

    {

        add:IncrementAction,

        jian:DecrementAction,

    }

)(CountUI);

export default Count

Header 组件： 

import React, { Component } from 'react'

export default class Header extends Component {

    render() {

        return (

            <div>

                Header

            </div>

        )

    }

}

package.json: 

{

  "name": "redux01",

  "version": "0.1.0",

  "private": true,

  "dependencies": {

    "@testing-library/jest-dom": "^5.14.1",

    "@testing-library/react": "^12.0.0",

    "@testing-library/user-event": "^13.2.1",

    "react": "^17.0.2",

    "react-dom": "^17.0.2",

    "react-redux": "^7.2.6",

    "react-scripts": "5.0.0",

    "redux-thunk": "^2.4.1",

    "web-vitals": "^2.1.0"

  },

  "scripts": {

    "start": "react-scripts start",

    "build": "react-scripts build",

    "test": "react-scripts test",

    "eject": "react-scripts eject"

  },

  "eslintConfig": {

    "extends": [

      "react-app",

      "react-app/jest"

    ]

  },

  "browserslist": {

    "production": [

      ">0.2%",

      "not dead",

      "not op_mini all"

    ],

    "development": [

      "last 1 chrome version",

      "last 1 firefox version",

      "last 1 safari version"

    ]

  }

}