redux核心

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