Redux 是一个用于管理应用状态的 JavaScript 库，通常与 React 一起使用，但也可以与其他视图库或框架结合使用。以下是关于 Redux 的一些关键概念和基本用法：

关键概念

1. Store：

存储应用的全部状态。

只有一个单一的 store，所有状态都集中管理。

通过 createStore 函数创建。

2. State：

应用的状态树。

不可变，只能通过 actions 修改。

3. Actions：

描述发生了什么的对象。

必须有一个 type 属性，表示 action 的类型。

可以包含其他数据作为 payload。

4. Reducers：

纯函数，根据当前状态和 action 返回新的状态。

不能有副作用，如 API 请求或路由跳转。

5. Dispatch：

发送 action 到 store 的方法。

调用 store.dispatch(action)。

6. Selectors：

从 store 中选择特定状态的函数。

常用于提取复杂状态。

export const INCREASE = "INCREASE";
export const DECREASE = "DECREASE";
export function incActionGenerator(){
    return {type: INCREASE, preload: 'increase the current value'};
}

export function decActionGenerator(){
    return {type: DECREASE, preload: 'decrease the current value'};
}

import {connect} from "react-redux";
import ReduxCounter from "./ReduxCounter";
import {incActionGenerator, decActionGenerator} from "./ReduxAction";
const mapStateToProps = (state) => ({
   title: state.title,
   info: state.info,
   value: state.value
})

const mapDispatchToProps = (dispatch) => ({
   onIncClick: () => dispatch(incActionGenerator()),
   onDecClick: () => dispatch(decActionGenerator())
})

const ReduxCounterContainer = connect(mapStateToProps, mapDispatchToProps)(ReduxCounter);
export default ReduxCounterContainer;

import React from 'react';
import {Button} from "react-bootstrap";
export default class ReduxCounter extends React.Component{
    constructor(props){
        super(props);
        this.state = {value:0};
    }
    render(){
        const {title, info, value, onIncClick, onDecClick} = this.props;
        return (
            <div>
                <h1>{title}</h1>
                <span>{info}{value}</span>
                <br/>
                <Button type="button" onClick={onIncClick}>加一</Button>  
                <Button type="button" onClick={onDecClick}>减一</Button>
            </div>
        )
    }
}

import { Provider } from 'react-redux';
import ReduxCounterContainer from './ReduxCounterContainer';
import { createStore } from 'redux';
import changeValue from './ReduxReducer';
const store = createStore(changeValue);
function ReduxApp(){
    return (
        <Provider store={store}>
            <ReduxCounterContainer />
        </Provider>
    )
}

const ReactReduxExampleOne = () => {
    return (
        <span>
            <ReduxApp/>
        </span>
    );
}

export default ReactReduxExampleOne;

安装react-redux
npm install react-redux

安装redux
npm install redux