react redux理解与使用方法

最新推荐文章于 2024-03-10 12:20:59 发布

前端自由人

最新推荐文章于 2024-03-10 12:20:59 发布

阅读量518

点赞数

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_28395503/article/details/122941676

版权

本文介绍了如何使用React Redux创建项目，包括通过npx create-react-app初始化项目，使用npm安装redux，理解Redux的核心概念如Store、Reducer、action以及如何在实际应用中创建Store和UI组件。

摘要由CSDN通过智能技术生成

创建项目

命令： npx create-react-app my-app

安装redux

命令： npm install redux

图片全局理解

在这里插入图片描述

Store 带有推送功能的数据仓库
react UI组件订阅subscribe
Reducer 帮助Store处理数据的方法
action 如打电话，发短信 ---- dispathch 消息分发

使用

创建Store.js

import {
    createStore } from "redux";
import languageReducer from "./languageReducer";

const Store = createStore(languageReducer)

export default Store

创建改变语言reducer 文件 xxx.js

const defaultState = {
      // 定义基础数据
    language: "zh",
    languageList: [
        {
   name:"中文", code:"zh"},
        {
   name:"English", code:"en"}
    ]
}

export default (state=defaultState,action) => {
   

    const type = action.type;
    switch(type){
   
        case "change_language