redux在我个人理解来看无非就是三个东西
1.state:状态,也就是需要用到的数据
2.action:告诉redux去执行什么操作,加还是减
3.reducer:对状态进行加工的函数,最后返回加工完的状态供我们使用
总结起来就是：你拥有一个原始数据,然后给redux一个指令,然后redux根据你的指令去对状态进行加工,最后返回加工完的状态供我们使用
接下来开始敲代码
1.第一步肯定就是安装redux啦
npm i redux
2.我们可以创建一个redux文件夹来存放相关的redux文件
3.我们在redux文件夹中创建一个store.js文件
//store.js文件
//1.引入redux的createStore函数来创建store
import {createStore} from 'redux'
//3.引入reducer,reducer.js创建在下方
import reducer from './reducer.js'
//2.创建一个store,调用时要传入一个为其服务的reducer,这时候就要引入reducer处理函数
const store = createStore(reducer)
//4.最后暴露store对象
export default store
4.store中引入了reducer.js文件,但是我们还没有创建,所以在redux文件夹下再创建reducer.js文件
//reducer.js文件
/* 我们上面说了reducer就是对状态进行加工的一个函数,他可以接受两个参数,一个是prestate也就是加工前的状态,
一个是action:也就是给他一个指令去行动,说到这里先说一下,我们可以通过store.dispatch({type:'指令'})去进行指令,
比如说我们给的指令是'add',那么action会接收到一个{type:'add'}
*/
//这里我们给preState中的count一个默认值0
const reducer = (preState={count:0},action)=>{
//注意不要直接修改preState的值,要返回一个新的newState,以免其他用到这个状态但不需要改变的组件受到影响
const newState={...preState}
switch(action.type){
case 'add':
newState.count++
return newState
default:
return preState
}
}
//最后暴露reducer函数
export default reducer
5.接下来就看看在组件中我们怎么去使用,我就简单在一个组件中去演示,在实际项目中可能各种组件相互包裹,但是用法也是一样的,我们的需求是点击按钮让数字+1
/*在需要用到的组件
1.store.subscribe(callback):订阅,监听redux状态的变化使用
2.store.dispatch({type,data}):分发订阅,传入一个action对象
3.store.getState():获取最新的值
*/
import { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import store from './redux1/store.js'
function App() {
// store.getState():获取最新的值
const [count, setCount] = useState(store.getState().count)
useEffect(() => {
// 订阅,通俗讲就是这个组件需要这个数据,所以我们进行订阅,当count状态改变的时候会触发,通知
store.subscribe(() => {
setCount(store.getState().count)
})
}, [])
return (
<div>
count:{count}
<button onClick={() => { store.dispatch({ type: 'add' }) }} > count++</button>
{/* store.dispatch({type,data}):分发订阅,通俗讲也就是让redux开始行动做数据处理,传入一个action对象*/}
</div>
)
}
ReactDOM.render(<App />, document.getElementById('root'))
6.一个简单redux案例我们就写好了,接下来后续我们继续优化，下班了
