redux java_redux 学习笔记

redux的作用

redux流程.png

Redux 主要分为三个部分 Action、Reducer、及 Store

action

action用来传递操作 State 的信息,以 Javascript Plain Object 的形式存在，形如

{

type: 'ADD_FILM',

name: 'Mission: Impossible'

}

type 属性是必要的，用来表达处理 state 数据的方式，其他属性任意，建议简单

但为了方便组织，可以创建函数来生产 action，即Action Creator

function addFilm(name) {

return { type: 'ADD_FILM', name: name };

}

Reducer

处理action传达需要操作的信息

通过传入旧的 state 和指示操作的 action 来更新 state

Reducer 根据传入的** action.type** 来匹配 case 进行不同的 state 更新

function films(state = initialState, action) {

switch (action.type) {

case 'ADD_FILM':

// 更新 state 中的 films 字段

return [{

id: state.films.reduce((maxId, film) => Math.max(film.id, maxId), -1) + 1,

name: action.name

}, ...state];

case 'DELETE_FILM':

return state.films.filter(film =>

film.id !== action.id

);

case 'SHOW_ALL_FILM':

return Object.assign({}, state, {

visibilityFilter: action.filter

});

//不要修改 state。 使用 Object.assign() 新建了一个副本

default:

return state;

//在 default 情况下返回旧的 state。遇到未知的 action 时，一定要返回旧的 state。

}

当 action.type变多时，可以按照功能拆分，在通过组合函数合并

function rootReducer(state = {}, action) {

return {

films: filmReducer(state.films, action),

filter: filterReducer(state.filter, action)

};

}

// rootReducer 将不同部分的 state 传给对应的 reducer 处理，最终合并所有 reducer 的返回值，组成整个state。

//使用Redux 提供的 combineReducers() 方法

import { combineReducers } from 'redux'

var rootReducer = combineReducers({

films: filmReducer,

filter: filterReducer

});

//combineReducers() 将调用一系列 reducer，并根据对应的 key 来筛选出 state 中的一部分数据给相应的 reducer，这样也意味着每一个小的 reducer 将只能处理 state 的一部分数据

Store

衔接action和reducer

Store 是单一的,维护着一个全局的 State，并且根据 Action 来进行事件分发处理 State,Store 是一个把 Action 和 Reducer 结合起来的对象。

生成store

import {createStore } from 'redux'

var store = createStore(rootReducer);

store 对象可以简单的理解为如下形式

function createStore(reducer, initialState) {

//闭包私有变量

var currentReducer = reducer;

var currentState = initialState;

var listeners = [];

function getState() {

return currentState;

}

function subscribe(listener) {

listeners.push(listener);

return function unsubscribe() {

var index = listeners.indexOf(listener);

listeners.splice(index, 1);

};

}

function dispatch(action) {

currentState = currentReducer(currentState, action);

listeners.slice().forEach(listener => listener());

return action;

}

//返回一个包含可访问闭包变量的公有方法

return {

dispatch,

subscribe,

getState

};

}

store.getState() 用来获取 state 数据。

store.subscribe(listener) 用于注册监听函数。每当 state 数据更新时，将会触发监听函数。

store.dispatch(action) 是用于将一个 action 对象发送给 reducer 进行处理

store.dispatch({

type: 'ADD_FILM',

name: 'Mission: Impossible'

});

connect

Connect 组件主要为 React 组件提供 store 中的部分 state 数据 及 dispatch 方法

通过import { connect } from 'react-redux'将state的值和action绑定到组件的props上

import { connect } from 'react-redux'

import Counter from '../components/Counter' //一个组件

import * as CounterActions from '../actions/counter'

//将state.counter绑定到props的counter

// state 将由 store 提供

function mapStateToProps(state) {

return {

counter: state.counter

}

}

//将action的所有方法绑定到props上

function mapDispatchToProps(dispatch) {

return bindActionCreators(CounterActions, dispatch)

}

//通过react-redux提供的connect方法将我们需要的state中的数据和actions中的方法绑定到props上

export default connect(mapStateToProps, CounterActions)(Counter)

saga

import {

takeEvery

} from 'redux-saga'

import {

call,

put,

fork,

take,

cancel

} from 'redux-saga/effects'

import {

GET_LOGINED_REQUEST,

LOGIN_REQUEST

} from './login.js'

import {

loginAPI,

loginedAPI

} from '../../../api'

export function* watchRequestLogined() {

yield takeEvery(GET_LOGINED_REQUEST, queryFlow)

}

export function* queryFlow(action) {

const task = yield fork(logined)

yield take(LOGIN_CANCEL)

yield cancel(task)

}

export function* logined(){

try {

const response = yield call(loginedAPI)

yield put({

type: LOGIN_SUCCESS,

response

})

} catch (error) {

yield put({

type: LOGIN_CANCEL,

error

})

}

}

export function* watchRequestLogin() {

yield takeEvery(LOGIN_REQUEST, loginFlow)

}

export function* authorize({account, password}){

try {

const response = yield call(loginAPI, {

account,

password

})

yield put({

type: LOGIN_SUCCESS,

response

})

} catch (error) {

yield put({

type: LOGIN_ERROR,

error

})

}

}

export function* loginFlow(action) {

const { account, password } = action.payload

const task = yield fork(authorize, { account, password })

yield take(LOGIN_CANCEL)

yield cancel(task)

}