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

简介: 什么是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项目中,可以使用reduxreact-redux来封装和管理全局状态。以下是在create-react-app项目中封装Redux并在需要的页面引入的步骤:

  1. 安装reduxreact-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

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

  1. 创建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。

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

  1. 在需要的页面引入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

  1. 在组件中使用Redux的状态:
    现在你可以在需要的组件中使用Redux的状态了。通过react-redux提供的useSelectoruseDispatch等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,如useSelectoruseDispatch。使用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;
  1. 使用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中,并定义了mapStateToPropsmapDispatchToProps函数来进行映射。

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

目录
相关文章
|
11天前
|
存储 JavaScript 前端开发
掌握现代Web开发的基石:深入理解React与Redux
【10月更文挑战第14天】掌握现代Web开发的基石:深入理解React与Redux
26 0
|
11天前
|
存储 JavaScript 前端开发
React中使用redux
【10月更文挑战第15天】
25 3
|
22天前
|
存储 JavaScript 前端开发
如何使用React和Redux构建现代化Web应用程序
【10月更文挑战第4天】如何使用React和Redux构建现代化Web应用程序
|
22天前
|
JavaScript 前端开发
使用 React 和 Redux 构建动态图表应用
【10月更文挑战第3天】使用 React 和 Redux 构建动态图表应用
|
22天前
|
JavaScript 前端开发
使用 React 和 Redux 构建一个计数器应用
【10月更文挑战第3天】使用 React 和 Redux 构建一个计数器应用
|
24天前
|
存储 JavaScript 前端开发
|
24天前
|
前端开发 JavaScript 网络架构
实现动态路由与状态管理的SPA——使用React Router与Redux
【10月更文挑战第1天】实现动态路由与状态管理的SPA——使用React Router与Redux
27 1
|
18天前
|
前端开发 JavaScript
深入理解前端状态管理:React、Redux 和 MobX
【10月更文挑战第7天】深入理解前端状态管理:React、Redux 和 MobX
14 0
|
3月前
|
开发者 安全 UED
JSF事件监听器:解锁动态界面的秘密武器,你真的知道如何驾驭它吗?
【8月更文挑战第31天】在构建动态用户界面时,事件监听器是实现组件间通信和响应用户操作的关键机制。JavaServer Faces (JSF) 提供了完整的事件模型,通过自定义事件监听器扩展组件行为。本文详细介绍如何在 JSF 应用中创建和使用事件监听器,提升应用的交互性和响应能力。
33 0
|
3月前
|
前端开发 Java UED
瞬间变身高手!JSF 与 Ajax 强强联手,打造极致用户体验的富客户端应用,让你的应用焕然一新!
【8月更文挑战第31天】JavaServer Faces (JSF) 是 Java EE 标准的一部分,常用于构建企业级 Web 应用。传统 JSF 应用采用全页面刷新方式,可能影响用户体验。通过集成 Ajax 技术,可以显著提升应用的响应速度和交互性。本文详细介绍如何在 JSF 应用中使用 Ajax 构建富客户端应用,并通过具体示例展示 Ajax 在 JSF 中的应用。首先,确保安装 JDK 和支持 Java EE 的应用服务器(如 Apache Tomcat 或 WildFly)。
41 0