搞事情,搞事情,搞事情,又换技术栈了,学过的Vue没鸡儿用了。那就介绍介绍React全家桶中蛋疼的Redux。
Redux是什么我就不多说了,因为以前看过Vuex,以为会上手简单点,嗯….确实简单点,但是还是很难学啊,进入正题。
Redux的核心概念只有三个:Action,Reducer,Store。
Action
Action 是把数据从应用传到 store 的有效载荷。说白了就是你要告诉store要有事情发生了,顺带带点东西过去。
上面代码中的就表明action的本质是一个对象。action 内必须使用一个字符串类型的 type 字段来表示将要执行的动作。就是一定要明确知道是干嘛去的。其他的字段就是按照需要定义携带的载荷,自行定义即可。
但是官方还是建议我们不要传递过大的数据量,尽量保持action的简洁。
Action创建函数
就是把上面的对象通过函数返回,复用代码。
这里基本上是Action的主要东西。是不是很简单!?但是实际使用中我们很少直接去dispatch一个Action,多数情况下你会使用 react-redux 提供的 connect()
帮助器来调用。这个这里暂时不展开,后面会说。同时这里讲的Action是同步的Action,异步的Action会在后面讲解。
Reducer
上面说了,Action是告诉store要有事情发生了,但是还没发生,具体的事情发生过程,也就是reducer操作改变state的过程。
Reducer是一个函数,并且是一个纯函数,接收两个参数:旧的state和Action,返回新的state。听起来也很简单。但是写reducer的时候有几个注意点:
- 不要修改传入参数
- 不要执行有副作用的操作,如 API 请求和路由跳转
- 不要调用非纯函数,如 Date.now() 或 Math.random()
因为上面这些操作会导致一些不可控制的状态。
纯函数就是:只要传入参数相同,返回计算得到的下一个 state 就一定相同。没有特殊情况、没有副作用,没有 API 请求、没有变量修改,单纯执行计算。12345678910111213141516171819202122232425262728293031323334353637// reducer.js// 这里就还是以官方的todolist为例子,这里故意采用不简化的方式写,后面优化,一步步来// redux 会在初始的时候调用一次 reducer (这时参数 state 为 undefined), 可以借用这个机会返回应用初始状态数据,或者直接用es6的写法const initialState = {todos: []}const todoApp = (state, action) => {if(typeof state === 'undefined'){state = initialState}...}const todoApp = (state = initialState, action) => {switch (action.type) {case 'ADD_TODO':return Object.assign({}, state, {todos: [...state.todos,{id: action.id,text: action.text,completed: false}]})default:return state}}//这里完成后的reducer最终是以以下的方式存在顶层的Store中<顶层的唯一>store = {...todoApp: {todos: []}...}
但是这里只有一个Action代码已经看起来不是很顺眼了,如果Action多了看上去更加复杂,那我们就拆分一下
|
|
这样看来,其实程序中操作state中相同数据的reducer都可以进行合成,只管理自己对应的那份数据就好了。
那对应的reducer会变成下面这样
简洁明了,而visibilityFilter和todos则是额外提出来的方法而已。Redux本身也提供了这样的方法combineReducers,下面的写法和上面的写法是完全等价的。
Store
Store就是存放应用数据的地方,Store 有以下职责:
- 维持应用的 state;
- 提供
getState()
方法获取 state; - 提供
dispatch(action)
方法更新 state; - 通过
subscribe(listener)
注册监听器; - 通过
subscribe(listener)
返回的函数注销监听器。
需要注意的是一个应用有且只有一个Store,就算需要拆分数据的逻辑时,也应该用reducer的组合,而不是创建多个Store。1234567// 就像todolist例子中使用的一样import { combineReducers } from 'redux'const todoApp = combineReducers({visibilityFilter,todos})const store = createStore(todoApp)
createStore()
的第二个参数是可选的, 用于设置 state 初始状态。这对开发同构应用时非常有用,服务器端 redux 应用的 state 结构可以与客户端保持一致, 那么客户端可以将从网络接收到的服务端 state 直接用于本地数据初始化。
至此,redux的基础概念就完了。
对于react相关的学习不够深入,有错希望及时指出。