redux工作流程+小例子的完整代码

创建项目：
1.sudo npm install -g create-react-app
2.create-react-app redux
index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import {
     Provider } from 'react-redux';
import store from './store';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Provider store={
    store}>
        <App />
    </Provider>
)

App.js

import React,{
    Component} from 'react';
import * as Action from './store/action';
import {
    connect} from 'react-redux';
class App extends Component {
    
    constructor(props) {
    
        super(props);
    }
    render() {
    
        const {
    value} = this.props;
        return (
            <div>
                <input value={
    this.props.value}  style={
    {
    marginRight:'5px'}} />
                <button onClick={
    () => this.props.add(value)} style={
    {
    marginRight:'5px'}}>+</button>
                <button onClick={
    () => this.props.sub(this.props.value)}>-</button>
            </div>
        )
    }
}
const mapStateToProps = (state) => ({
    
    value:state.AppValue.value
})
const mapDispatchToProps = (dispatch) => ({
    
    //加一
    add(data) {
    
        dispatch(Action.Add(data))
    },
    //减一
    sub(data) {
    
        dispatch(Action.Sub(data))
    }
})
export default connect(mapStateToProps,mapDispatchToProps)(App);

action.js

import * as ActionTypes from "./actionType";
//加一
export const Add = (data) => {
    
    var addData = data + 1;
    return {
    
        type:ActionTypes.ADDVALUE,
        data:addData
    }
}
//减一
export const Sub = (data) => {
    
    var subData = data - 1;
    return {
    
        type:ActionTypes.SUBVALUE,
        data:subData
    }
}

actionType.js

export const ADDVALUE = 'add';
export const SUBVALUE = 'sub';

reducer.js

import * as ActionTypes from './actionType';
const reducer = (state = {
    },action) => {
    
    switch(action.type) {
    
        case ActionTypes.ADDVALUE: {
    
            return {
    ...state,value:action.data}
        }
        case ActionTypes.SUBVALUE:{
    
            return {
    ...state,value:action.data}
        }
        default: {
    
            return state;
        }
    }
}
export default reducer;

store.js

import {
    combineReducers, createStore} from 'redux'
import AppReducer from './store/reducer'
const reducer = combineReducers({
    
    AppValue:AppReducer
})
const initState = ({
    
    AppValue: {
    
        value:12
    }
})
export default createStore(reducer,initState)