React-6-Redux

Redux

 Redux 是一个独立的JavaScript 状态管理库， 非React内容之一

安装

 npm i redux

核心概念

 store

  为了对 state,reducer, action,进行统一的管理和维护,我们需要创建一个Store对象(仓库)

创建仓库
import {createStore} from 'redux

let store = createStore()
console.log(store)
//	store对象提供的函数
/*
    dispatch: function dispatch(action)​    --发起一次修改动作(同步方法,立即执行)
    getState: function getState()​          --获取状态
    subscribe: function subscribe(listener)--监听状态的修改
    replaceReducer: function replaceReducer(nextReducer)​   --替换掉reducer
*/

 reducer

  自定义函数
  纯函数(函数式编程的一种概念)
    1.相同的输入永远返回相同的输出
    2.不修改函数的输入值
    3.不依赖外部环境状态
    4.无任何副作用(如异步请求以及定时器造成的问题)
  好处:1.便于测试 2.有利于重构
  参数为state和action

 state

  通常我们会把应用中的数据存储到一个对象树中进行统一管理，我们把这个位置称为： state
  state只读,为了保证数据状态的可维护性和测试
  state作为参数传入reducer纯函数中

 action对象

  action作为参数传入reducer纯函数中
  我们对state 的修改是通过reducer 纯函数来进行的，同时通过传入的 action 来执行具体的操作
  action对象有两个属性:
   1.type属性：表示要操作的动作类型,增删改查…(必填)
   2.payload属性：操作state的同时传入的数据

import {createStore} from 'redux


//	参数1:state的初始值
//	参数2:action 修改的值
function reducer(state={
    name:'电影院',
    age:20
},action){
	switch (action.type) {
        case 'edit_name':
            return {
                ...state,
                name:action.name
            }
    }
	//必须返回state
	return state
}
//创建仓库
let store = createStore(reducer)
console.log(store)
//	state发生改变时触发,参数是函数触发时执行的回调函数
store.subscribe(()=>{
	//	获取状态
    console.log(store.getState())
})
store.dispatch({
	//	自定义 必填
    type:'edit_name',
    //修改的值
    name:"游泳馆"
})

三大原则

 1.单一数据源

  整个应用的 state 被储存在一棵 对象树 中，并且这个 对象树 只存在于唯一一个 store 中

 2.State是只读的

  唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象

 3.使用纯函数来执行修改

  为了描述 action 如何改变 对象树 ，你需要编写 reducers