react-redux使用步骤

1、安装相关包

（1）redux

（2）react-redux

（3）redux-thunk，有异步操作时才需要

2、创建相关文件

redux逻辑相关文件

定义UI组件和容器组件

3、编写以上文件内容，以计数案例为例，主要代码如下

reducer.js

import { INCREMENT, DECREMENT } from "./constant";
const initState = 0;
export default function countReducer(preState = initState, action) {
    const { type, data } = action;
    switch (type) {
        case INCREMENT: return preState + data;
        case DECREMENT: return preState - data;
        default: return preState;
    }
}

action.js

import { INCREMENT, DECREMENT } from "./constant";

// 同步action，action的值为Object类型的一般对象
export const createIncrementAction = data => ({ type: INCREMENT, data });
export const createDecrementAction = data => ({ type: DECREMENT, data });

// 异步action，action的值为函数，异步action中一般会调用同步action
export const createIncrementAsyncAction = (data, time) => {
    return (dispatch) => {
        setTimeout(() => {
            dispatch(createIncrementAction(data));
        }, time);
    }
}

store.js

import { createStore, applyMiddleware } from 'redux'
import countReducer from './count_reducer'
// 引入redux-thunk，用于支持异步action
import thunk from 'redux-thunk'
export default createStore(countReducer, applyMiddleware(thunk))

容器组件连接UI组件

import React, { Component } from 'react';
// 引入action
import {
    createIncrementAction,
    createDecrementAction,
    createIncrementAsyncAction
} from '../../redux/count_action';

// 通过connect连接UI组件与redux
import { connect } from 'react-redux';


// UI组件

class Count extends Component {
    increment = () => {
        const { value } = this.selectedNumber;
        this.props.increment(value * 1);
    }
    decrement = () => {
        const { value } = this.selectedNumber;
        this.props.decrement(value);
    }
    incrementAsync = () => {
        const { value } = this.selectedNumber;
        this.props.incrementAsync(value * 1, 500);
    }

    render() {
        return (
            <div>
                <h2>当前求和为：{this.props.count}</h2>
                <select ref={c => this.selectedNumber = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>&nbsp;
                <button onClick={this.increment}>＋</button>&nbsp;
                <button onClick={this.decrement}>－</button>&nbsp;
                <button onClick={this.incrementAsync}>异步＋</button>
            </div >
        )
    }
}


/*
    mapStateToProps 返回的是一个对象，
    把状态通过传递props的形式映射给UI组件，
    对象的key就是传递给UI组件props的key，
    value就是props的值
*/
// function mapStateToProps(state) {
//     return { count: state }
// }

/*
    可以传状态，也可以传方法 mapDispatchToProps就是用来传递方法
*/
// function mapDispatchToProps(dispatch) {
//     return {
//         increment: data => dispatch(createIncrementAction(data)),
//         decrement: data => dispatch(createDecrementAction(data)),
//         incrementAsync: (data, time) => dispatch(createIncrementAsyncAction(data, time))
//     }
// }


export default connect(
    (state) => ({ count: state }),
    {
        increment: createIncrementAction,
        decrement: createDecrementAction,
        incrementAsync: createIncrementAsyncAction
    }
)(Count);

4、最后需要在入口组件引入store，并传递

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { Provider } from 'react-redux';
import store from './redux/store'


const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

以上就是react-redux的基础使用步骤。