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)