redux入门指南
前言:大概一个月没有写博客了,这两天正好是周末,就写点东西来梳理下之前几个月的所写与所得;
两个月前,学习了一下 redux ,还是一点难度的,花了我一天的时间来搞明白他,
但是都没怎么记录,今天这篇博客就是用一个demo来介绍 redux , react-redux , react-thunk 的简单用法;
首先就是下载,使用命令:
npm install --save redux react-redux react-thunk
下好后 npm start
启动;
文件夹列表如下:
redux 的最关键的函数就是 dispatch !
而 dispatch 的本质是什么呢?
dispatch 接受的是一个对象,这个对象至少有一个是键值是用来判断类型的,其余的可以是任意的;
而他(其实也就是 reducer 函数)他本身有一个 state ,用来存储初始值,根据接受到的对象中的类型键值来判断对于当前值的不同操作,
而且他必须返回修改后的 state;
现在我们创建好文件后修改 src/index.js::
import { createStore,applyMiddleware} from 'redux' import thunk from 'redux-thunk' import { Provider } from 'react-redux' import calcul from './redux/reducer'; let store = createStore(calcul,applyMiddleware(thunk)); ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));
上部的代码中除了 reactDOM.render 是修改的,其他都是新添加的;
这里我们是引用了 redux, redux-thunk, react-redux模块和一个 reducer 文件;
讲一下 createStore 的作用,他在官方文档中的释义是这样的:
创建一个 Redux store 来以存放应用中所有的 state。
应用中应有且仅有一个 store。
其实这只是一个声明赋值,而如果你不用中间件(thunk)可以这样写:
let store = createStore(calcul);
一下子简单了很多;
而 Provider 这个html的标签就是将 redux 的值和函数,传递给整个项目;
上面说到了 create那我们先创建 reducer/index.js:
import { combineReducers } from 'redux' const countReducer = (state = 0, action) => { switch (action.type) { case 'INCREMENT': return state + action.data; case 'DECREMENT': return state - action.data; default: return state; } }; const calcul = combineReducers({ countReducer }); export default calcul;
combineReducers 是一个语法糖:他的作用就是将多个reducer函数合并成一个对象;
上面的 countReducer 就是一个reducer函数了,就像我上面所说的,action就是接受的那个对象,
而state就是他自带的初始值,通过switch操作,根据 action.type 的值来进行不同的操作,
但是也是最重要的就是必须有返回值;
接下来是修改src/App.js:
import React, { Component } from 'react'; import {connect} from 'react-redux'; import Calculation from './components/calculation'; class App extends Component { render() { const {dispatch,countNum} = this.props; return ( <div className="App"> <Calculation getValue={countNum} dispatch={dispatch}></Calculation> </div> ); } } function showData(state) { return { countNum:state.countReducer } } export default connect(showData)(App);
connect 函数是来自 react-redux 的,他是一个非常重要的函数,
在最下面一行代码中:connect(showData)(App);
第一个接受的是一个对象,在 showData 中, state 就是所有 reducer 的初始值;
通过这个函数将当前的组件与 redux 中的数值挂钩,他返回的是当期组件所需要的 reducer 的值(你也可以对值进行filter),
而第二个接受对象呢,就是当前组件了;
可以看到,我们还引用了一个名为 Calculation 的组件,他接收了来自 redux 的 dispatch , countNum 这两个参数(函数);
在下一个文件是 src/components/calculation.js:
import React, { Component } from 'react'; import {DECREMENT,middleINCRENT} from '../redux/action'; export default class Count extends Component { constructor(props) { super(props); this.state = { changeVal:1 } } input = (e)=>{ this.setState({changeVal: Number(e.target.value)}); }; render() { let {dispatch,getValue} = this.props; return <div> this is calculation <h1>{getValue}</h1> <input type="text" onChange={this.input} value={this.state.changeVal} /> <button onClick={() => (dispatch(middleINCRENT(this.state.changeVal)))}>+</button> <button onClick={() => (dispatch(DECREMENT(this.state.changeVal)))}>-</button> </div> } }
这个文件引用了文件:src/redux/action/index.js里的 DECREMENT , middleINCRENT 两个函数;
其中 middleINCRENT 便是添加了中间件的 action 函数;
这个组件的作用是什么呢:就是根据 input 里的值,来改变 redux 里的 countReducer 的初始值,靠着点击按钮来触发;
dispatch 我先不说,先说下 DECREMENT , middleINCRENT ,而这就不得不提到下面这个文件:
src/redux/action/index.js:
export function INCREMENT(data){ return { type:'INCREMENT', data } } export function middleINCRENT(data) { return (dispatch, getState) => { const currentValue = getState(); if(currentValue.countReducer >=200){ return false; } dispatch(INCREMENT(data)); } } export function DECREMENT(data) { return { type:'DECREMENT', data } }
现在你们知道中间件的作用了么?他就是在提交值的时候,对值进行统一的判断和修改, 可以在这个地方进行ajax操作;
我们看这个文件里的 INCREMENT 和 DECREMENT 函数,这两个 函数返回的值就是我最开始所说的, dispatch 所接收的值,
可以看到 type 即是判断的类型了,而 data 呢,就是组件 caculation.js 里的 input 的值;
现在看中间件 middleINCRENT 这个函数,他是返回一个函数,而这个函数可以接受到两个参数,一个呢是 dispatch 函数,而另外一个呢是当前的 reducer 函数的值;
通过学习这个组件, redux 的基本流程可以掌握了,当然实际项目中并不会这么简单,但是原理就是这样;
最后我将这个 demo 放在了GitHub: https://github.com/Grewer/reduxDemo
如果帮到了你,还请推荐或者 star;
完;
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!