Redux-详解-解开谜底

Redux-详解-解开谜底

• 类似于vuex是一个全局状态树（跨组件通信），让组件通信的时候会变得极其方便。
• 作用：集中式管理 react 应用中多个组件共享的状态

Redux的设计理念

1. 组件可以派发( dispatch)行为( action)去修改state，然后为这些actions编写reducers来修改state。整个 state 转化是在 reducers 中完成
2. state发生变化，然后通知订阅该state的组件，去更新自己的视图。

Redux遵循的三个原则

1. 单一事实来源：整个应用的 state都被存储到一个状态树里面，并且这个状态树只存在于唯一的 store中。
2. 状态是只读的：state是只读的，唯一改变 state的方法就是触发 action。store.dispatch(action)
3. 状态改变只能通过纯函数来执行：为了实现根据 action 修改 state值，我们就需要编写 Reducer。它是一个纯函数，接收先前的 state 和 action 返回新的 state 。

Redux的重要构成

1.Store

• 在 redux 里面，只有一个Store，整个应用需要管理的数据都在这个Store里面。

• redux提供了一个createStore来创建store

• // 1. 引入redux
  // 2. createStore(reducer)
  import { createStore } from "redux";
  const store = createStore(reducer);
  
  export default store
  

2.action

• 这个 action 指的是视图层发起的一个操作，告诉Store 我们需要改变。

• 每个 action 必须有一个 type 属性，这表示 action 的名称。

• const add = ()=> {
    return {
      type: "add",
      data: { val: 666}
    }
  }
  

• 上边函数返回的就是一个 Action，它是一个包含 type 和 data 的对象.

• Action 的作用就是告诉状态管理器需要做什么样的操作

• 正如上边的栗子，就是要添加一条信息，这样就定义了一个Action，而 data 就是你做这个操作需要的数据。

3.Reducer

• 这是一个确定状态将如何变化，以及更新状态的地方

• Reducer 是一个纯函数，接受 旧 state 和 action，根据不同的 Action 做出不同的操作，并返回新的 state 。即：(state, action) => state

• 在上面我们定义了一个Action,但是Action不会自己主动发出变更操作到Store，所以这里我们需要一个叫dispatch的东西，它专门用来发出action。

• store.dispatch 通知

• <button onClick={()=> {
    store.dispatch(add())
  }}></button>
  

• 当 dispatch 发起了一个 action 之后，会到达 reducer，那么这个 reducer 用来干什么呢？顾名思义，这个reducer就是用来计算新的store的，reducer接收两个参数：当前的state和接收到的action，然后它经过计算，会返回一个新的state。(前面我们已经说过了，不能直接更改state，必须通过返回一个新的state来进行变更。)

• const reducer = (prevState, action)=> {
    .... return newState
  }
  

• 可以看到，我们在创建store的时候，我们在createStore里面传入了一个reducer参数，在这里，我们就是为了，每次store.dispatch发送一个新的action,redux都会自动调用reducer，返回新的state。

api

1. store.subscribe(listener) 订阅: 监听变化，当 state 发生变化时，就可以在这个函数的回调中监听。当Redux状态变化时，强制更新render,让页面进行渲染
2. store.dispatch(action) 通知： 向redux中发送 action对象 通知改变
3. store.getState 访问redux的状态

Redux的工作流程