react-native redux-含源码

源码

参考文档

1.redux 到底是什么呢

其实就是用来统一管理整个应用 State 的, 将所有的 state 变化进行统一的流程处理, 使应用的 state变化清晰可见.

Redux提供一种存储整个应用状态到一个地方的解决方案（可以理解为统一状态层），这个存储所有应用状态的地方称为“store”。
① 组件发生事件（action）时不会再 setState, 而是将事件（action）通知给store，由 store 分发(dispatch)一个事件(action), 。
② store会把旧的state和acticon类型传递给reducer。
③ reducer会根据传入的action类型调用对应的方法，然后返回新的state。
④ store 会收集到所有 reducer的state, 最后更新 state, 组件内部依赖的state的变化情况就可以通过订阅 store 来实现。

2.redux 的三原则

1. Single source of truth
单一数据源。整个应用的state，存储在唯一一个store中, 一个应用有且只有一个 store。

2. State is read-only
状态是只读的。唯一能改变state的方法，就是触发action操作。不要想着再去 setState 了, 用了 redux 之后你改变 state 唯一的方法就是 dispatch 一个 action（发送一个事件）

3. Changes are made with pure functions
在改变state tree时，用到action，同时也需要编写对应的reducer才能完成state改变操作。并且 reducer 一定要是一个纯函数, 不要在里面做一些乱七八糟的骚操作。

3. Action Reducer Store的简单使用

Action：比如点击按钮 登录操作 退出登录操作 都可以定义为一个 action

//types.js

module.exports = {
    LOGIN_IN_DONE : 'LOGIN_IN_DONE',   //登录
    LOGIN_IN_ERROR : 'LOGIN_IN_ERROR', //登录错误
    LOGIN_IN_OUT : 'LOGIN_IN_OUT',     // 登出
}

import  types from '../types'; //action 类型
 

export function login_done(data) { // 登录
    return {
        type: types.LOGIN_IN_DONE,
        data: data
    }
}

export function login_err(data) { // 登录错误
    return {
        type: types.LOGIN_IN_ERROR,
        data: data
    }
}

export function login_out(data) { // 登出
    return {
        type: types.LOGIN_IN_OUT,
        data: data
    }
}

Reducer:是一个纯函数, 不要在这里做逻辑操作的事情, 他就是根据一个 action 的 type 返回一个新的 state 一定要保证其纯洁性

import  types from '../types';

const initialState = {
    icon: 'https://ws3.sinaimg.cn/large/005BYqpggy1g3nqgsgmj9j301s01s3yc.jpg',
    name: '',
    password: ''
}

export default function loginReducer(state = initialState, action) {
    switch (action.type) {

        case types.LOGIN_IN_DONE:
            return {
                status: 1,
                message: '登录',
                user: {
                    ...state,
                    ...action.data
                }
            }

        case types.LOGIN_IN_ERROR:
            return {
                status: -1,
                message: '登录错误',
                user: {
                    ...action.data
                }
            }
        case types.LOGIN_IN_OUT:
            return {
                status: 0,
                message: '登出',
                user: {
                    ...initialState,
                    ...action.data
                }
            }

        default:
            return state;
    }
}

Store：store 就是一个保存着整个 APP 的所有state 的对象, 可以看作应用 state 的集合 , 也就是说你在任意组件中都可以通过 store 拿到你想要的 state

import { createStore, applyMiddleware, compose } from 'redux';

import thunk from 'redux-thunk';

import createLogger from 'redux-logger';

import rootReducer from '../reducers';


function configureStore(initialState) {
    return createStore(
        rootReducer,
        initialState,
        compose(applyMiddleware(thunk, createLogger))
    );
}

const store = configureStore();

export default store;

Provider

React-Redux 的 API 分为两部分，分别是 Provider store 以及connect() 方法。connect() 方法用于连接单个的 RN 组件和 Redux Store，而 Provider 则作为根布局用于包装所有的 RN 组件，使得其中使用了 connect() 后的组件可以自由访问 Store

总而言之，Provider模块的功能很简单，从最外部封装了整个应用，并向connect模块传递store。

import React, {Component} from 'react';
import {Text, View} from 'react-native';
import store from './js/redux/store'
import { Provider } from 'react-redux'
import RootWithNavigation from './navigators/RootWithNavigation';

export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <View style={{ flexGrow: 1 }}>
        </View>
      </Provider>
    );
  }
}

4. 界面的使用

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import  * as loginAction from '../redux/actions/LoginActions';
import store from '../redux/store'


function mapStateToProps(state) {
    return {
        user: state.LoginReducer.user,
        status: state.LoginReducer.status,
        message: state.LoginReducer.message
    }
}

function matchDispatchToProps(dispatch) {
    return {
        ...bindActionCreators(loginAction, dispatch)
    }
}


const {login_done} = this.props //login_done是loginAction里的
 let obj = { name: this.state.name, password: this.state.password, icon: 'https://ws3.sinaimg.cn/large/005BYqpggy1g1qsw2e8bzj30sg0sg0ui.jpg' }
 login_done(obj) //登录Action


// connect 连接组件与 store ,任何时候只要 store 发生改变, mapStateToProps 都会被调用, 函数接收两个参数 第一个参数里有两个参数 分别是mapStateToProps  matchDispatchToProps 
export default connect(mapStateToProps, matchDispatchToProps)(LoginPage)