redux
Redux
是一个独立的JavaScript 状态管理库, 非React内容之一
redux使用场景
引入 Redux 是比较明智的:
- 你有着相当大量的、随时间变化的数据
- 你的 state 需要有一个单一可靠数据来源
- 你觉得把所有 state 放在最顶层组件中已经无法满足需要了
安装
npm i redux
核心概念
-
理解Redux 核心几个概念与它们之间的关系
-
store
:仓库 -
reducer
:纯函数,用此来修改state数据 -
state
:仓库中的数据,但是只读,同时也是reducer的参数1:state的初始值 -
action
:reducer的参数2:state的修改值
Store 对象 (负责存储的仓库)
为了对 steta, reducer, action,进行统一的管理和维护,我们需要创建一个Store对象(仓库)
引入
import React from 'react';
import {createStore} from 'redux'
创建仓库
仓库中引入纯函数
// createStore(reducer):创建一个仓库,在仓库中对我们的状态进行管理
let store = createStore(reducer);
console.log(store)
reducer纯函数 – 函数式编程的一种概念
function reducer(state=默认值,action){}:是一个纯函数
参数1:state的初始值
参数2:action修改的值
reducer纯函数使用
function reducer(state={
name:"张三",
age:20
},action){
switch(action.type){ //判断修改后传进来的action的type值
case 'change-name':
return{
...state,
name:action.name
}
case 'add-hobby':
return{
...state,
hobby:action.hobby
}
}
return state
}
-
1.相同的输入永远返回相同的输出
-
2.不修改函数的输入值
-
3.不依赖外部环境状态
-
4.无任何副作用 (例如:异步请求以及定时器造成的问题)
-
使用纯函数的好处
- 1.便于测试
- 2.有利于重构
state 对象
通常我们会把应用中的数据存储到一个对象树中进行统一管理,我们把这个位置称为: state
-
state 是只读的
这里需要注意的是,为了保证数据状态的可维护性和测试,不推荐直接修改state中的原数据 -
通过纯函数修改 state
action 对象
-
我们对state 的修改是通过reducer 纯函数来进行的,同时通过传入的 action 来执行具体的操作
-
action 是一个对象
-
type 属性: 表示要进行操作的动作类型, 增删改查。。。。
-
payload属性: 操作 state 的同时传入的数据
-
但是这里需要注意的是,我们不直接去调用Reducer函数,而是通过Store对象提供的dispatch方法来调用
仓库输出的方法
dispatch
: ƒ dispatch(action) :发起一次修改(同步方法,立即执行)
action:{
type:“做了什么修改” –必填,自定义
}getState
: ƒ getState() :获取状态subscribe
: ƒ subscribe(listener):监听状态的修改replaceReducer
: ƒ replaceReducer(nextReducer) :替换掉reducer
用方法进行增删改查
- 对数据进行修改存储
store.dispatch({
type:"change-name",
name:"李四"
})
- 对数据进行添加存储
store.dispatch({
type:"add-hobby",
hobby:"打游戏"
})
subscribe
监听状态的修改
state发起改变时触发
参数是:触发时执行的回调函数
store.subscribe(()=>{
console.log(store.getState())
})
redux 三大原则
-
单一数据源
: 整个应用的state 被储存在一棵 obeject tree中,并且这个object tree 只存在于唯一的store中 -
State 是只读的
,唯一改变state的方法就是触发 action,action是一个用于描述已发生事件的普通对象 -
使用纯函数来进行修改
Reducer 只是一些纯函数,它接收先前的 state 和 action,并返回新的 state。刚开始你可以只有一个 reducer,随着应用变大,你可以把它拆成多个小的 reducers
,分别独立地操作 state tree 的不同部分,因为 reducer 只是函数
combineReducers
辅助函数的作用是,把一个由多个不同 reducer 函数作为 value 的 object,合并成一个最终的 reducer 函数,然后就可以对这个 reducer 调用 createStore。
//`引入`
import React from 'react';
import {createStore,combineReducers} from 'redux'
//`定义不同页面的纯函数的数据操作`
function index(state={name:'首页'},action){
switch(action.type){
case 'change_index_name':
return {
...state,
name:action.name
}
}
return state
}
function list(state={name:'列表'},action){
switch(action.type){
case 'change_list_name':
return {
...state,
name:action.name
}
}
return state
}
//`统一在reducer里合并成一个最终的 reducer 函数`
// 参数:传入一个对象,对象中的属性,就是要合并的reducer
//注意点:对象的属性名,要和函数名相同
let reducer = combineReducers({
index,
list
})
//`创建仓库`
let store = createStore(reducer);
//`监听状态的修改`
store.subscribe(()=>{
console.log(store.getState())
})
// `对数据进行修改存储`
store.dispatch({
type:"change_index_name",
name:"我是一个首页页面"
})
store.dispatch({
type:"change_list_name",
name:"我是一个list"
})