实现redux in native native

我正在尝试实现redux以在多个屏幕中显示 balancer ，因为我在单个屏幕中更新 balancer 它应该反映在所有其他屏幕/组件中 .

我对redux很新 . 如你所知，redux的复杂性，甚至难以实现它 .

我在GitHub和youtube中关注了一些示例并开始实现它 .

在 Actions folder 我有 . 以下两个文件

counteractions.js

import * as types from './actionTypes.js';

//ActionCreator methods

export function updateBalance(balanceInfo) {

    return {
        type: types.LEDGER_BALANCE,
        payLoad: { balanceInfo }
    }
}

在Reducers文件夹下 . 我有这个文件

balance.js

import * as types from '../actions/actionTypes.js';

const initialState = {
    balance: 0
}

// reducer  functions .. accepts  current/initial state , actions and  returns new state



const balanceReducer=(state,action)=>
{
    switch (action.type) {
        case types.LEDGER_BALANCE:
            return {
                balance: action.payload.balanceInfo
            }
            break;
        default:
            break;
    }
}

export default balanceReducer;

在ConfigureStore.js中

从'redux'导入;从'./reducers/index.js'导入rootReducer;

import balanceReducer from './reducers/balance.js';

const initailState = {
    balance: 0,
}

export const store=createStore(balanceReducer,balanceReducer);

App.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import { Provider } from 'react-redux';
//Provider - makes redux store  available to connect() class in component hierarchy below
import { applyMiddleware, createStore, compose, combineReducers } from "redux";
import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger';
import rootReducer from './reducers/index.js';
//import store from './configureStore.js';

import {
  Platform,
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  TextInput
} from 'react-native';
import ReduxDemo from "./reduxDemo.js";
import { store, reducer } from './balanceDemo.js';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
  'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
  'Shake or press menu button for dev menu',
});

export default class App extends Component<{}> {

  constructor(props) {
    super(props);
    this.state = {
      balancelocal: '',
    }
  }



  _updateLedger = () => {
    // store.dispatch({ type: 'BALANCE', payLoad: '500' });
    store.dispatch({ type: 'BALANCE', payLoad: 'Your balance is 8000 MUR' });
  }


  render() {

    store.subscribe(() => {

      this.setState({
        balancelocal: store.getState(),
      })
      //this.balanceInfo = store.getState().balance;
     // alert(this.state.balancelocal);
    });
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={this._updateLedger}>
          <Text>Update balance</Text>
        </TouchableOpacity>

        <TextInput style={{height:100,width:400}} value={this.state.balancelocal}/>
      </View>
    );
  }
}

const styles = StyleSheet.create（{container：{flex：1，justifyContent：'center'，alignItems：'center'，backgroundColor：'＃F5FCFF'，}，welcome：{fontSize：20，textAlign：'center'，margin ：10，}，说明：{textAlign：'center'，color：'＃333333'，marginBottom：5，}，}）;

我还没有完成配置存储文件 . 和 . 我在想 . 我必须订阅和发送行动..

`I want to update balance with button click from app.js I have. to update balance in another page automatically..

请指导我理解并实现redux . 请建议更好的文件夹结构和更好的实现redux的方法 .