redux核心

最新推荐文章于 2022-12-06 19:41:29 发布

原创最新推荐文章于 2022-12-06 19:41:29 发布 · 173 阅读

0 ·

CC 4.0 BY-SA版权

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"
})