1

I'm trying to implement redux to show balance in multiple screens as I update balance in single screen it should reflect in all other screens/components.

I'm pretty new to redux. As you know with complexity around redux, its even making difficult to implement it.

I followed some examples in GitHub and youtube and started implementing it .

under Actions folder I have. following two files

counteractions.js

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

//ActionCreator methods

export function updateBalance(balanceInfo) {

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

Under Reducers folder.I have this file

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;

in ConfigureStore.js

import {createStore} from 'redux';
import rootReducer from './reducers/index.js';

    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>
        );
      }
    }

The styling for it

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

I'm yet to complete configure store file. and. I'm wondering, where I have to subscribe and dispatch actions ...

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

Please guide me to understand and implement redux .Please suggest better folder structure and better way to implement redux.

1

1 Answer 1

1

https://redux.js.org/basics/exampletodolist
The above link has a basic setting up of react with redux. It is almost similar for React Native too.

You need to wrap your App component inside Provider imported from 'react-redux', and then give that to AppRegistry. Also you do not seem to have imported any actions and haven't used the connect function either. Like the comment above, it is better for you go through a video guide on basics of redux. It'll help you understand all the complexity, and once you understand, nothing is as easy as redux. All the best.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.