Redux三大原则

简介: Redux三大原则

1.唯一数据源

整个应用的state都被存储到一个状态树里面,并且这个状态树,只存在于唯一的store中

2.保持只读状态

state是只读的,唯一改变state的方法就是触发action,action是一个用于描述以发生时间的普通对象

3.数据改变只能通过纯函数来执行

使用纯函数来执行修改,为了描述action如何改变state的,你需要编写reducers

1.Store

  • store就是保存数据的地方,你可以把它看成一个数据,整个应用只能有一个store
  • Redux提供createStore这个函数,用来生成Store
import {
    createStore
} from 'redux'
const store = createStore(fn);

2.State

state就是store里面存储的数据,store里面可以拥有多个state,Redux规定一个state对应一个View, 只要state相同,view就是一样的,反过来也是一样的,可以通过store.getState( )获取

import {
    createStore
} from 'redux'
const store = createStore(fn);
const state = store.getState()

3.Action

state的改变会导致View的变化,但是在redux中不能直接操作state也就是说不能使用this.setState来操作,用户只能接触到View。在Redux中提供了一个对象来告诉Store需要改变state。Action是一个对象其中type属性是必须的,表示Action的名称,其他的可以根据需求自由设置。

const action = {
    type: 'ADD_TODO',
    payload: 'redux原理'
}

在上面代码中,Action的名称是ADD_TODO,携带的数据是字符串‘redux原理’,Action描述当前发生的事情,这是改变state的唯一的方式

4.store.dispatch( )

store.dispatch( )是view发出Action的唯一办法

store.dispatch({
    type: 'ADD_TODO',
    payload: 'redux原理'
})

store.dispatch接收一个Action作为参数,将它发送给store通知store来改变state。

5.Reducer

Store收到Action以后,必须给出一个新的state,这样view才会发生变化。这种state的计算过程就叫做Reducer。 Reducer是一个纯函数,他接收Action和当前state作为参数,返回一个新的state

注意:Reducer必须是一个纯函数,也就是说函数返回的结果必须由参数state和action决定,而且不产生任何副作用也不能修改state和action对象

const reducer = (state, action) => {
    switch (action.type) {
        case ADD_TODO:
            return newstate;
        default
        return state
    }
}


目录
相关文章
|
3月前
|
设计模式 存储 前端开发
React开发设计模式及原则概念问题之自定义Hooks的作用是什么,自定义Hooks设计时要遵循什么原则呢
React开发设计模式及原则概念问题之自定义Hooks的作用是什么,自定义Hooks设计时要遵循什么原则呢
|
3月前
|
存储 JavaScript 前端开发
Redux 遵循的三个原则
【8月更文挑战第30天】
50 2
|
3月前
|
JavaScript 中间件
Redux 中 Sagas 的概念
【8月更文挑战第31天】
27 0
|
3月前
|
存储 JavaScript 前端开发
Redux 有什么优点?
【8月更文挑战第31天】
53 0
|
3月前
|
JavaScript 前端开发 中间件
Redux 中 Thunk 的概念
【8月更文挑战第31天】
29 0
|
3月前
|
存储 JavaScript 前端开发
|
6月前
|
设计模式 前端开发 API
写出易维护的代码|React开发的设计模式及原则
本文对React社区里出现过的一些设计模式进行了介绍,并讲解了他们遵循的设计原则。
|
6月前
|
存储 JavaScript 前端开发
Redux 与 Vuex:探索它们的设计思想及应用差异
Redux 与 Vuex:探索它们的设计思想及应用差异
|
JavaScript 前端开发 算法
Redux和Vuex的异同点,以及用到的相同的思想
Redux和Vuex的异同点,以及用到的相同的思想
|
6月前
|
JavaScript 前端开发 中间件
redux 有什么优缺点
redux 有什么优缺点
162 0