Redux
- Redux是将整个应用状态存储到store，store里存在一个状态树state tree
- 组件可通过store.dispatch派发行为action给store，store不会直接修改state，而是通过用户编写的reducer来生成新的state，并返回给store
- 其他组件通过订阅store中的state状态来刷新试图
注意点：
- 整个应用有且只有一个store，其内部的state tree存储整个应用的state
- state是只读的，修改state只能通过派发action，需要通过reducer纯函数描述action如何修改state的
- 单一数据源的设计让React组件之间通信更加方便，也有利于状态的统一管理
先看一个计数器的例子：
store.js
import {
createStore} from 'redux'
export const ADD = 'ADD'
export const MINUS = 'MINUS'
const reducer = (state = {
count:0}, action) => {
console.log('action', action)
switch(action.type){
case ADD:
return {
count: state.count + 1}
case MINUS:
return {
count: state.count - 1}
default:
return state
}
}
let store = createStore(reducer)
export default store
1.关于store
通过createStore可以创建一个store，方法里需要传入参数reducer。创建的store是一个对象，有以下方法可以调用：
- store.getState(): 获取最新的state tree
- store.dispatch(): 派发行为action
- store.subscribe(): 订阅store中state的变化
2.关于reducer
reducer必须是个纯函数，接收state和action。state是旧状态，根据action.type的不同，生成新的state并返回
Counter.jsx
import {
useEffect, useState } from 'react'
import store from './store'
const Counter = () => {
//通过getState方法获取count值
const [num, setNum] = useState(store.getState().count)
useEffect(()=>{
//通过subscribe实现订阅，当store中state状态发生变化时，就将新值传入
const unSubscribe = store.subscribe(()=>{
setNum(store.getState().count)
})
return () => {
//取消订阅
unSubscribe && unSubscribe()
}
},[])
return (
<div>
<p>{
num}</p>
//通过dispatch派发action给store
<button onClick={
()=>{
store.dispatch({
type: 'ADD'})}}>+</button>
<button onClick={
()=>{
store.dispatch({
type: 'MINUS'})}}>-</button>
</div>
)
}
export default Counter
这样一个简单的Counter组件就实现了。
Redux内部就是使用了’发布-订阅’模式。
3.combineReducers
当一个应用中包含多个模块，将所有模块的state放在一起并不合理，更好的做法是按照模块进行划分，每个模块都有自己的reducer和action，最终通过Redux的combineReducers合并成一个大的reducer。
combineReducers方法接收一个对象，属性key可任意设置，value对应每个模块的reducer函数，最终返回一个合并之后的reducer方法。
import {
createStore, combineReducers} from 'redux'
export const ADD = 'ADD'
export const MINUS = 'MINUS'
export const SUM_ADD = 'SUM_ADD'
export const SUM_MINUS = 'SUM_MINUS'
const countReducer = (state = {
count:0}, action) => {
console.log('action', action)
switch(action.type){
case ADD:
return {
count: state.count + 1}
case MINUS:
return {
count: state.count - 1}
default:
return state
}
}
const sumReducer = (state = {
sum:0}, action) => {
console.log('action', action)
switch(action.type){
case SUM_ADD:
return {
sum: state.sum + 1}
case SUM_MINUS:
return {
sum: state.sum - 1}
default:
return state
}
}
const combineRe = combineReducers({
countReducer, sumReducer})
let store = createStore(combineRe)
export default store
import {
useEffect, useState } from 'react'
import store from './store'
const Counter = () => {
//注意这里的取值
const [num, setNum] = useState(store.getState().countReducer.count)
const [sum, setSum] = useState(store.getState().sumReducer.sum)
useEffect(()=>{
const unSubscribe = store.subscribe(()=>{
setNum(store.getState().countReducer.count)
setSum(store.getState().sumReducer.sum)
})
return () => {
unSubscribe && unSubscribe()
}
},[])
return (
<div>
<p>{
num}</p>
<button onClick={
()=>{
store.dispatch({
type: 'ADD'})}}>+</button>
<button onClick={
()=>{
store.dispatch({
type: 'MINUS'})}}>-</button>
<p>{
sum}</p>
<button onClick={
()=>{
store.dispatch({
type: 'SUM_ADD'})}}>+</button>
<button onClick={
()=>{
store.dispatch({
type: 'SUM_MINUS'})}}>-</button>
</div>
)
}
export default Counter
如果在store.js中我们这样设置combineReducers:
const combineRe = combineReducers({
a:countReducer,
b:sumReducer
})
那么在接下来的组件获取值时就应该这么用：
store.getState().a.count
store.getState().b.sum
reducer合并之后，store中的state tree也会按照模块进行划分。
当组件中派发action时，action会传递到combineReducers返回的函数中，在该函数中，会调用每个模块各自的reducer生成各自新的state, 最终将所有state合并之后，去更新store中的state。
总结
在React组件中使用store，需要手动引入store文件，手动订阅store中状态的变化，这样并不合理，所以我们需要引入react-redux来解决问题。