什么是redux？如何在react 项目中使用redux？

原文合集地址如下，有需要的朋友可以关注

本文地址

合集地址

redux 概念

redux是一种用于管理JavaScript应用程序的状态管理库。它可以与React、Augular、Vue等前端框架结合使用，但也可以纯在JavaScript应用程序中独立使用。redux遵循单项数据流的原则，通过一个全局的状态树来管理应用程序的状态，从而使状态的变化更加可预测和已于维护。
redux的核心概念包括：

1. Store: redux 的状态储存仓库，包括整个应用程序的状态树。应用程序中的所有状态都保存在整个单一的状态树中。
2. Action： 代表状态变化的对象。它是一个包含type字段的JavaScript对象，用于描述发生的事件类型，并可以携带一些额外的数据。
3. Reducer：纯函数，用于处理状态变化。接受旧的状态和一个action作为参数，返回一个新的状态。
4. Dispatch：将action发送到reducer的过程，通过调用store.dispatch(action)来触发状态的变化。
5. Subscribe：用于注册监听器，当状态发送变化时，可以通过store.subcribe(listener)来执行回调函数。
   下面时一个简单的redux示例代码：

// 引入Redux
const { createStore } = require('redux');

// 定义初始状态和Reducer
const initialState = { count: 0 };

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    case 'DECREMENT':
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
}

// 创建Redux store
const store = createStore(counterReducer);

// 订阅状态变化
store.subscribe(() => {
  const currentState = store.getState();
  console.log('Current state:', currentState);
});

// 触发状态变化
store.dispatch({ type: 'INCREMENT' }); // 输出：Current state: { count: 1 }
store.dispatch({ type: 'INCREMENT' }); // 输出：Current state: { count: 2 }
store.dispatch({ type: 'DECREMENT' }); // 输出：Current state: { count: 1 }

如何在项目中封装一个全局状态。

在使用create-react-app创建的React项目中，可以使用redux和react-redux来封装和管理全局状态。以下是在create-react-app项目中封装Redux并在需要的页面引入的步骤：

1. 安装redux和react-redux库：

npm install redux react-redux

2. 创建Redux store：
   在项目的src目录下创建一个名为store的文件夹，并在该文件夹下创建一个index.js文件，用于创建Redux store。

// src/store/index.js
import { createStore } from 'redux';
import rootReducer from './reducers'; // 导入根Reducer

const store = createStore(rootReducer);

export default store;

在上述代码中，使用createStore函数创建了Redux store，并传入了根ReducerrootReducer。

3. 创建Reducers：
   在src/store文件夹下创建一个名为reducers.js的文件，用于定义和组合所有的Reducers。

// src/store/reducers.js
import { combineReducers } from 'redux';
// 导入其他Reducers，比如：
// import counterReducer from './counterReducer';

const rootReducer = combineReducers({
  // 在这里将所有的Reducers组合起来
  // counter: counterReducer,
});

export default rootReducer;

在这里，可以导入并组合所有的Reducers，如果你有多个Reducer，可以在这里添加并在combineReducers函数中进行组合。

4. 创建Actions：
   在src/store文件夹下创建一个名为actions.js的文件，用于定义Redux的Actions。

// src/store/actions.js
// 定义Action Types
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';

// 定义Action Creators
export const increment = () => ({ type: INCREMENT });
export const decrement = () => ({ type: DECREMENT });

在上述代码中，定义了两个Action Types和对应的Action Creators。

5. 创建Reducer：
   在src/store文件夹下创建一个名为counterReducer.js的文件，用于定义一个Reducer示例。

// src/store/counterReducer.js
import { INCREMENT, DECREMENT } from './actions';

const initialState = { count: 0 };

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case INCREMENT:
      return { ...state, count: state.count + 1 };
    case DECREMENT:
      return { ...state, count: state.count - 1 };
    default:
      return state;
  }
};

export default counterReducer;

在上述代码中，定义了一个简单的counterReducer，根据不同的Action Type来处理状态的变化。

6. 在需要的页面引入Redux：
   在你需要使用Redux的组件或页面中，可以使用react-redux提供的Provider组件将Redux store注入到应用中，使其在组件层次结构中的任何地方都可以访问全局状态。

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

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

在上述代码中，使用Provider组件将store作为prop传递给应用的根组件App。

7. 在组件中使用Redux的状态：
   现在你可以在需要的组件中使用Redux的状态了。通过react-redux提供的useSelector和useDispatch等hooks，或者使用connect函数，你可以在组件中访问和修改全局状态。

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './store/actions';

const Counter = () => {
  const count = useSelector((state) => state.counter.count);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
};

export default Counter;

在上述代码中，使用useSelector获取counter的状态，以及使用useDispatch获取dispatch函数，从而在组件中对状态进行修改。

connect函数

在react-redux中，connect函数是一个高阶函数（Higher-Order Function），它允许你将Redux的状态和dispatch函数作为props传递给React组件。使用connect函数可以将组件与Redux store连接起来，从而让组件可以访问和修改全局状态。

在React中，有两种方式可以访问和使用Redux的状态：

1. 使用Hooks（推荐）：react-redux提供了一些Hooks，如useSelector和useDispatch。使用Hooks的方式更加简洁，直接，而且是React的新特性。可以在函数式组件中使用这些Hooks来获取Redux的状态和dispatch函数，例如：

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './store/actions';

const Counter = () => {
  const count = useSelector((state) => state.counter.count);
  const dispatch = useDispatch();

  return (
    <div>
      <h1>Counter: {count}</h1>
      <button onClick={() => dispatch(increment())}>Increment</button>
      <button onClick={() => dispatch(decrement())}>Decrement</button>
    </div>
  );
};

export default Counter;

2. 使用connect函数（旧版方式）：在较早版本的react-redux中，Hooks可能不可用或者不适用于类组件，此时可以使用connect函数来实现连接。connect函数可以将Redux的状态和dispatch函数映射到组件的props上，这样组件就能够通过props来访问和修改Redux的状态。

import React from 'react';
import { connect } from 'react-redux';
import { increment, decrement } from './store/actions';

class Counter extends React.Component {
  render() {
    const { count, increment, decrement } = this.props;

    return (
      <div>
        <h1>Counter: {count}</h1>
        <button onClick={increment}>Increment</button>
        <button onClick={decrement}>Decrement</button>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    count: state.counter.count
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    increment: () => dispatch(increment()),
    decrement: () => dispatch(decrement())
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Counter);

在上述代码中，使用connect函数将Redux的状态映射到组件的props中，并定义了mapStateToProps和mapDispatchToProps函数来进行映射。

总结：
使用connect函数是较早版本react-redux的一种实现方式，而使用Hooks的方式则是React的新特性，更加简洁和方便。如果你使用的react-redux版本较新，并且项目支持React Hooks，那么推荐使用Hooks的方式来访问和修改Redux的状态。如果项目需要兼容旧版本的react-redux或需要在类组件中使用，那么可以考虑使用connect函数的方式。