Redux笔记
Redux简介
1、Redux 是一个状态容器
Redux 就像是作者自己的介绍,它不会为你提供任何的东西,它不会告诉你如何做路由,它只专注于应用程序状态,是一个 JavasSript 的状态容器,所有的状态的变化都是当前状态和 Action 共同的作用结果。 对于view来说,不用关心数据是怎样变化,只需要在 view 层面等待 store 通知自己数据发生变化,然后把数据渲染成页面即可。
2、Redux 和 React 之间没有关系
Redux 和 React 之间没有关系。Redux 支持 React、Angular、Ember、jQuery 甚至纯 JavaScript。 尽管如此,Redux 还是和 React 和 Deku 这类框架搭配起来用最好,因为这类框架允许你以 state 函数的形式来描述界面,Redux 通过 action 的形式来发起 state 变化。
Redux的工作流程图
redux的工作流程图看起来比较复杂,但是换一个例子来进行理解,会感觉还是比较简单的。在网上看到了这样的一篇文章,将Redux的工作流程比喻成图书馆借书那就很容易理解了,具体链接为https://www.jianshu.com/p/d39712ddfb68
具体使用步骤
1.创建个store文件夹,创建个记录本文件reducer.js,用来存放一些数据和行为
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | let defaultState={ inputVal: "" , list:[ "测试1" , "测试1" , "测试1" , "测试1" ], }; export default (state=defaultState,action)=>{ if (action.type=== "input_change_value" ){ let newState=JSON.parse(JSON.stringify(state)); newState.inputVal=action.value; return newState; } else if (action.type=== "input_submit_value" ){ let newState=JSON.parse(JSON.stringify(state)); newState.inputVal= "" ; newState.list.push(action.value); return newState; } else if (action.type=== "input_delete_value" ){ let newState=JSON.parse(JSON.stringify(state)); newState.list.splice(action.value,1); return newState; } return state; } |
2. 创建个图书管理员store,在store文件夹下创建index.js文件,将创建好的记录本文件引入进去
1 2 3 4 | import {createStore} from 'redux' import reducer from './reducer' const store=createStore(reducer); export default store; |
3.现在就可以通过告诉store是什么行为来获取数据或者改变reducer中的数据了
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | import React,{Component} from "react" ; import store from './store/index.js' class Test extends Component{ constructor(props){ super (props); //获取reducer中的数据 this .state=store.getState(); } render(){ return ( <div> </div> ) } changeInput(e){ let action={ type: "input_change_value" , value:e.target.value } store.dispatch(action); } handleSubmit(){ let value= this .state.inputVal; let action={ type: "input_submit_value" , value } //提交行为告诉store该干什么,store根据reducer中储存的行为进行操作 store.dispatch(action); } delItem(index){ let value=index; let action={ type: "input_delete_value" , value } store.dispatch(action); } } export default TodoList; |
以上为大致使用,但是还是需要优化的地方
提交行为action的时候type是必须要传的,如果我们一不小心将type值拼写错误,控制台是不会报任何错误的,一旦发生这种情况,将给调试带来很大困难。所以一般情况,我们可以将action的Type拆除为一个单独的文件actionTypes.js
1 2 3 | export const INPUT_CHANGE_VALUE= "input_change_value" ; export const INPUT_SUBMIT_VALUE= "input_submit_value" ; export const INPUT_DELETE_VALUE= "input_delete_value" ; |
使用actionCreator统一创建action
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | import {INPUT_CHANGE_VALUE,INPUT_SUBMIT_VALUE,INPUT_DELETE_VALUE} from "./actionTypes.js" export let getChangeValueAction=(value)=>{ return { type:INPUT_CHANGE_VALUE, value, } } export let getSubmitValueAction=(value)=>{ return { type:INPUT_SUBMIT_VALUE, value, } } export let getDeleteValueAction=(value)=>{ return { type:INPUT_DELETE_VALUE, value, } } |
1 2 3 4 5 6 7 | import {getChangeValueAction,getSubmitValueAction,getDeleteValueAction} from "./store/actionCreators.js" .<br>.<br>.<br>.<br>.<br>. . changeInput(e){ let action=getChangeValueAction(e.target.value); store.dispatch(action); } |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· DeepSeek火爆全网,官网宕机?本地部署一个随便玩「LLM探索」
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 上周热点回顾(1.20-1.26)
· 【译】.NET 升级助手现在支持升级到集中式包管理