Redux

1 React Components -> Action Creators -> Reducers -> Store

用戶經過界面組件觸發action函數，而後經過reducer更新store裏存儲的數據。

2 redux是單獨的框架，不是react的一部分，能夠用react-redux中的connect將react與redux關聯起來。

 

下面來看下實現的步驟吧~

1、首先看reducers.js吧，他主要更新redux裏的數據：

import { combineReducers } from 'redux';
//設置一個初始數據的對象
let initRedux = {
    type: 'A'
};

export default function MathReducer(state = initRedux, action) {
    switch (action.type) {
        case 'change':
            //更新store裏的數據
            return {
                ...state,
                type: action.type
            };
        default:
            return state;
    }
}

2、store.js 生成store對象（redux的核心）

import { createStore,applyMiddleware } from 'redux';
import Reducer from './reducers'; // 這裏引用的是上一段代碼裏的內容
import thunk from 'redux-thunk';

//內部會第一次調用reducer函數，獲得初始state 
const store = createStore(Reducer, applyMiddleware(thunk)); 

export default store
// 輸出的store對象傳到組件裏，咱們能夠經過組件的props觸發他的dispatch改變redux數據，也能夠經過組件的props獲取redux數據

3、App.js，這是咱們整個程序的入口

import React from 'react';
//你能夠把Provider想象成一個注入器，它能夠幫咱們把store注入到咱們的根組件上，這樣的話store將無處不在
import { Provider } from 'react-redux'; 
import store from './redux/store'; // 這裏的store指上一段代碼裏的內容
import Main from './Main';

export default class App extends React.PureComponent {
  render() {
    return (
      <Provider store={store}> // 在這裏把store注入到它包裹的組件裏
        <Main/>
      </Provider>
    );
  }
}

4、Main.js，在這裏咱們能夠經過組件的props觸發他的dispatch改變redux數據，也能夠經過組件的props獲取redux數據，可是須要用connect把Main組件和store鏈接起來

import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { connect } from 'react-redux';
import Content from './Content';
import { styles } from './style/styles';

class Main extends Component{
    constructor(props){
        super(props);
    }
    render() {
        return (
            <View>
                <View style={styles.stCommon.wrap}>
                    <TouchableOpacity onPress={() => {this.changeType('A')}}>
                        <Text style={styles.stCommon.red}></Text>
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => {this.changeType('B')}}>
                        <Text style={styles.stCommon.blue}></Text>
                    </TouchableOpacity>
                </View>
                // 把store傳給子組件Content
                <Content store={this.props}/>
            </View>
        )
    }   
    changeType (type){
         this.props.dispatch({
            type: 'change',
            type: type
        });
    }
}

let select = (state) => {
    return {
        type: state.type
    }
}
export default connect(select)(Main);