redux 的概述 (2)

调用非纯函数,如 Date.now()或 Math.random()

const singerState = { singer: [ { name: "刘德华", desc: "一位演员" } ] }; //state初始状态 const actorState = { actor: [ { name: "郭富城", desc: "一位歌手" } ] }; //state初始状态 const reducer = function(state = {}, action) { return { singerState: singer_reducer(state.singerState, action), actorState: actor_reducer(state.actorState, action) }; }; // console.log(reducer); export default reducer; function singer_reducer(state = singerState, action) { if (action.type === "ADD_SINGER") { console.warn("发起了action=ADD_SINGER"); state = Object.assign({}, state, { singer: state.singer.concat([action.payload]) }); //Object.assgin会修改第一个参数的值,所以将state放到二号位 return state; } return state; //遇到未知的 action 时,一定要返回旧的 state } function actor_reducer(state = actorState, action) { if (action.type === "ADD_ACTOR") { console.warn("发起了action=>ADD_ACTOR"); state = Object.assign({}, state, { actor: state.actor.concat([action.payload]) }); return state; } if (action.type === "MINUS_ACTOR") { console.warn("发起了action=>MINUS_ACTOR"); state.actor = state.actor.splice(action.index, 1); return state; } return state; }

redux 当然提供了的便捷方法 combineReducers().combineReducers()只是生成一个函数 combination,这个函数将调用所有的 reducer,每个 reducer 根据 key 值筛选出 state 的一部分数据进行处理.这个函数再将所有的 reducer 结果合成一个大对象.

import { combineReducers } from "../redux/index"; // 返回一个combination函数 const reducer = combineReducers({ singer_reducer, actor_reducer }); // console.log(reducer);

此时在 store 中,数据的 key 值会变为 singer_reducer 和 actor_reducer,我们可以通过设置不同 key 来更改在 store 中存放的 key

{ singerState:singer_reducer, actorState:actor_reducer } //或者将函数名更改

redux 中 store

store 维护应用的 state

提供 getState()方法获取 state

提供 dispatch()方法触发 action,更新 state (action->reducer->newState)

subscribe()注册监听器

subscribe()返回一个函数用来注销监听器

const store = createStore(reducer); const unsubscribe = store.subscribe(listener); bound_add_singer_action({ name: "周华健", desc: "一位大帅哥" }); bound_add_actor_action({ name: "谢安琪", desc: "位小美女" }); bound_minus_actor_action(1); unsubscribe(); bound_add_singer_action({ name: "周杰伦", desc: "歌手一枚" }); bound_add_actor_action({ name: "周星驰", desc: "笑了" }); function listener() { console.log(store.getState()); } function bound_add_singer_action(payload) { return store.dispatch(addSinger_action(payload)); } function bound_add_actor_action(payload) { return store.dispatch(addActor_action(payload)); } function bound_minus_actor_action(index) { return store.dispatch(minusActor_action(index)); }

当我们 shore.dispatch()之后返回的值就是一个用来注销该监听器的 unsubscribe 函数,redux 中源码:

function subscribe(listener) { if (typeof listener !== 'function') { throw new Error('Expected listener to be a function.') } let isSubscribed = true ensureCanMutateNextListeners() <!-- 将listener推入到执行队列中去 --> nextListeners.push(listener) return function unsubscribe() { if (!isSubscribed) { return } isSubscribed = false ensureCanMutateNextListeners() <!-- 找到监听的listener,并将函数从队列中删除 --> const index = nextListeners.indexOf(listener) nextListeners.splice(index, 1) } }

第一个 Redux 中文文档

第二个 Redux 中文文档

Redux 官方文档

Redux 简明教程

Understand Redux

Redux 入门教程（三）：React-Redux 的用法