Redux的理解与学习
1.Redux基本介绍
Redux:是js应用的状态容器,提供可预测的状态管理.将Flux和函数式编程reducer结合在一起.另外的状态管理器还有Mobx.
redux中文文档
a.redux可以无视组件层级;
b.对于组件来说,redux就是一个第三方的全局的变量.
Redux三个核心概念
(1)三个核心概念
核心概念:store action reducer
action
动作,一个js对象,包含两个属性:(action只是表示有事情要做,但是他不做具体的事)
a. type:标识属性,值为字符串,多个type用action分开;
b. payload:数据属性,可选,表示本次动作携带的数据.
reducer
一个函数,作用:a.初始化状态; b.修改状态;
修改状态:根据传入的旧状态和action,返回新状态.
公式:(previousState,action)=>newState
store
store:仓库,Redux的核心,整合action和reducer.
特点:a.一个应用只有一个store; b:维护应用的状态,获取状态:store.getState();
c.创建store时接收rducer为参数:const store=createStore(reducer);
d:发起状态更新时,需要分发action:store.dispatch(action)
其他API: a.订阅/监听状态变化:const unSubscribe=store.subscribe(()=>{});
b.取消订阅状态变化:unSubscribe()
Redux功能演示核心代码
安装redux,npm i redux
(1)acton的实例代码
//action
const action1 = { type: 'add1' },
const action2 = { type: 'addN', payload: 12 },
const action3 = { type: 'addN', payload: 10 },
(2) reducer的实例代码
//reducer
const initState = 0//初始state
const reducer = (preState = initState, action) => {
// if (action.type==='add1') {
// return preState+1
// } else if (action.type==='addN') {
// return preState+action.payload
// } else {
// return preState
// }switch (action.type) {
case 'add1':
return preState + 1
case 'addN':
return preState + action.payload
default:
return preState
}
}
store的实例代码
//创建store
import { createStore } from 'redux'
const store = createStore(reducer)
//1.获取状态
console.log(store.getState());
//2.更新状态
//a. dispatch,分发一个action,也就是发起状态更新;
//b: store.dispatch会调用reducer函数,并将action传给reducerstore.dispatch(store.getState())
//3.添加订阅者
store.subscribe(() => {
//状态改变时,执行相应操作
console.log('数据变化了...');
})
store.dispatch(action1)
store.dispatch(action2)
React-redux基本介绍
(1)react中直接使用redux有很多不便的地方
1.每个组件都要引入store
2.在根组件的写法不友好
store.subscribe(() => {
console.log('数据改变了');
ReactDOM.render( <App />,document.getElementById('root') )
})
ReactDOM.render( <App />,document.getElementById('root'))
react-redux库
是React官方提供的React绑定库
作用:为React接入Redux,实现在React中使用Redux进行状态管理.
react-redux基本使用
1.安装:`npm i redux npm i react-redux,都要安装
2.a.使用:按redux的要求,创建好store,reducer,action等;
b:从react-redux中引入provider,useSelector,useDispatch来操作redux.
内容
Provider
用法:直接包在根组件上,<Provider store={store}>,组件不需要都再单独引入store了.
import {Provider } from 'react-redux'
import store from './store';ReactDOM.render(
<Provider store={store}>
<App />
</Provider>, document.getElementById('root'))
useSelector
用法:获取公共状态;
好处:相比react+redux,不需要使用store.getState()了;state变化了,他会自动更新;
useDispatch:修改数据
import React from 'react'
import { useDispatch ,useSelector} from 'react-redux'
export default function Uncle() {
//修改数据
const dispatch = useDispatch()
//获取数据,state就是redux的数据
const num = useSelector((state) => {
return state
})
return (
<div style={{border:'1px solid #ccc',margin:10,padding:10}}>
Uncle组件:{num}
<button onClick={() => {
dispatch({type:'sub1'})
}}>-1</button>
</div>
)
}
store/index.js
//1.创建store
import { createStore } from 'redux'
import reducer from './reducer'const store = createStore(reducer)
export default store
store/reducer.js中
const initState = 0
export default function reducer (state = initState, action) {
console.log(action);
switch (action.type) {
case 'addN':
return state+action.payload *1
case 'sub1':
return state-1
default:
return state
}
}
Reducer的分离与合并
(1)问题
随着项目功能复杂,需要Redux管理的状态越来越多,导致reducer函数越来越重.
(2)解决思路
拆分:按业务模块拆分,把大的reducer拆成小文件.
//1.创建store
import { createStore } from 'redux'
import reducer from './reducers/index'//注意此处const store = createStore(reducer)
export default store