Redux其实很简单,如何搞定Redux
一、Redux是什么?
学过Vue的朋友应该晓得Vuex,就知道了这个东西,没有学过的朋友也不要慌,总结来说redux就是一个存储数据的仓库。如果你没有想到用它,或者你项目不用它也可以完成,那就不要用他了。
二、思想介绍
Redux 有三个核心
-
Action 个人理解就是很多的资源(比如金银珠宝),换算成代码就是一个带type的对象,对象有名字,有数据。像一个装着金银珠宝的箱子,箱子上有变化或者名字
-
-
Reducer Reducer呢像一个佣人或者强盗,他负责搬运或者对这箱珠宝进行处理,
-
Store Store这个就是最后的仓库了,他是没有灵魂的,就负责放数据(金银珠宝)
-
整体逻辑图
二、使用步骤
1.使用脚手架创建React的项目
creact-react-app my-xxx //创建命零
2.给项目加载redux
yarn add redux //创建命零
3.项目目录解构
4.实现原理
- 创建页面组件
import React, { Component } from 'react';
//导入store
import store from '../../store'
// 导入 action
import {sendAction} from '../../action'
class Home extends Component {
componentDidMount(){
//检测store发生改变时,触发
store.subscribe(()=>{
console.log("subscribe",store.getState());
// 一旦发生变化,就渲染视图
this.setState({})
})
}
//点击后执行
handleClick=()=>{
// 将action 传递给reducer
const action = sendAction()
store.dispatch(action)
}
render() {
return (
<div>
<button onClick={this.handleClick}>按钮</button>
<div>{store.getState()}</div> {/* 获取仓库中的数据 */}
</div>
);
}
}
export default Home;
2.action对象
// 定义action
const sendAction=()=>{
return {
type:'send-action',
value:'redux中的数据'
}
}
module.exports={
sendAction
}
- 自定义reducer对象
// 自定义reducer
//默认值
const initValue = '默认值'
const myReducer = (state = initValue, action) => {
switch (action.type) {
case 'send-action': //根据箱子上的名字进行处理
return action.value //取出箱子里的金银珠宝
default://如果没有标签,默认就扔到杂物堆
return state
}
}
// 导出reducer
module.exports = {
myReducer,
}
4.创建store对象
// 导入redux,创建store
import { createStore } from "redux";
// 导入reducer
import {myReducer} from '../reducer/'
// 佣人把金银珠宝放到仓库
const store =createStore(myReducer)
// 导出store
export default store
总结
提示:这里对文章进行总结:主要介绍了最最最基本的redux思路,三个对象一定要掌握理解,后面还有更难的哦,着急下班了,下次更新react-redux。2021/11/02 18:31