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

<>redux 概念

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

* Store: redux 的状态储存仓库，包括整个应用程序的状态树。应用程序中的所有状态都保存在整个单一的状态树中。
* Action： 代表状态变化的对象。它是一个包含type字段的JavaScript对象，用于描述发生的事件类型，并可以携带一些额外的数据。
* Reducer：纯函数，用于处理状态变化。接受旧的状态和一个action作为参数，返回一个新的状态。
* Dispatch：将action发送到reducer的过程，通过调用store.dispatch(action)来触发状态的变化。
* 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并在需要的页面引入的步骤：

* 安装redux和react-redux库： npm install redux react-redux
* 创建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。

* 创建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函数中进行组合。

* 创建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。

* 创建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来处理状态的变化。

* 在需要的页面引入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
storefrom './store'; import App from './App'; ReactDOM.render( <Provider store=
{store}> <App /> </Provider>, document.getElementById('root') );
在上述代码中，使用Provider组件将store作为prop传递给应用的根组件App。

* 在组件中使用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的状态：

* 使用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;
* 使用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函数的方式。

• « 上一篇：网络安全行业相关证书
• » 下一篇：纯JS+Vue实现一个仪表盘