天天看點

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 來實作。

react-native redux-含源碼

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)
           

繼續閱讀