redux

redux概念

Redux是JavaScript应用程序的可预测状态容器。

redux 设计思想

1. Web 应用是一个状态机，视图与状态是一一对应的。
2. 所有的状态，保存在一个对象里面。

基本概念和 API

store

Store 就是保存数据的地方，你可以把它看成一个容器。整个应用只能有一个 Store。

Redux 提供createStore这个函数

state

Store对象包含所有数据。如果想得到某个时点的数据，就要对 Store 生成快照。这种时点的数据集合，就叫做 State。

当前时刻的 State，可以通过store.getState()拿到。

Redux 规定， 一个 State 对应一个 View。

Action

State 的变化，会导致 View 的变化。但是，用户接触不到 State，只能接触到 View。所以，State 的变化必须是 View 导致的。Action 就是 View 发出的通知，表示 State 应该要发生变化了。Action 是一个对象。其中的type属性是必须的，表示 Action 的名称。可以这样理解，Action 描述当前发生的事情。改变 State 的唯一办法，就是使用 Action。它会运送数据到 Store。

store.dispatch()是 View 发出 Action 的唯一方法。

Reducer

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

Redux 的工作流程

用户发送action ,store 自动调用reducer,并且传入当前state和收到action,reducer 返回新的state,state 一有改变,store就会调用监听函数subscribe ,listener可以通过store.getState()得到当前状态,state改变,重新渲染 View

以上内容来源于阮一峰老师博客

异步操作(redux-saga)

获取验证码示例:

/component/verifyCode

<button onClick={this.handClick}>获取验证吗</button>

handClick(){
    const {dispatch} = this.props;
    //发送异步请求 action
    dispathc(userAction.verifyCode({
       mobile:mobile
    }));
}

/actions/userActions

    //发送请求
    const VERIFYCODE = 'VERIFYCODE';
    //获取数据成功
    const VERIFYCODE_SUCCESS = 'VERIFYCODE_SUCCESS';
    //获取数据失败
    const VERIFYCODE_FAIL = 'VERIFYCODE_FAIL';

    //actionCreate
    //payload 传递参数
    export const verifyCode = (payload) => ({type:VERIFYCODE,payload});
    export const verifyCode_Success = (data) => ({type:VERIFYCODE_SUCCESS,data});
    export const verifyCode_Fail = (error) => ({type:VERIFYCODE_FAIL,error});

/reducers/userReducers

    function getVerifyCode(state={isFetching:false,data:null},action){
        //根据action type 返回state
        switch(action.type){
            case 'VERIFYCODE':
                return {
                    ...state,
                    isFetching:true
                }
            case 'VERIFYCODE_SUCCESS':
                return {
                    ...state,
                    isFetching:false,
                    data:action.data
                }
            case 'VERIFYCODE_FAIL':
                return {
                    ...state,
                    isFetching:false,
                    error:action.error
                }
            default:
                return state;
        }
    }

    export const rootReducer = combineReducers({
        getVerifyCode
    })

/sagas/userSaga

function* getVerifyCode(action){
    //调用异步函数
    const data = yield call(service.getVerifyCode,action.payload);
    if(data.status===0){
        //获取数据成功，发送成功action
        yield put(userActions.verifyCode_Success(data.content));
    }else{
        //获取数据失败，发送失败action
        yield put(userActions.verifyCode_Fail('系统错误'));
    }
}

export function* watch(){
    //监听action type VERIFYCODE ,触发函数getVerifyCode
    yield takeEvery('VERIFYCODE', getVerifyCode),
}

/store/index

import {
    createStore,
    applyMiddleware
} from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from '../reducers';

export default function configureStore() {
    const sagaMiddleware = createSagaMiddleware();
    const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));
    store.runSaga = sagaMiddleware.run;
    return store;
}

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {
    Provider,
} from 'react-redux';
import rootSaga from './js/sagas';
import configureStore from './js/store';

import App from './js/containers/App';


const store = configureStore();
store.runSaga(rootSaga);


const render = (Component) => {
    ReactDOM.render(
        <Provider store={store}>
            <Component/>
        </Provider>,
        document.getElementById('root')
    );
};

render(App);

redux-saga 文档