Setting up React Native with Redux

readme

npm install --save redux
npm install --save react-redux


Create following folders on root
App
 -> store
    -> reducers
    -> actions
 -> components

Create index.js inside actions folder

In reducers folder create two file userReducer.js & index.js
# See content below

Create store.js inside store folder

In App.js add code for store

actions>index.js

export const ACTIVE_TEXT_CHANGE = 'ACTIVE_TEXT_CHANGE';

export const changeText = (text) =>{
    return {
        type: ACTIVE_TEXT_CHANGE,
        payload: text
    }
};

App.js

import store from "./store/store";
import { Provider } from "react-redux";

export default class App extends React.Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <StatusBar
          backgroundColor={theme.PRIMARY_COLOR}
          barStyle="light-content"/>
          <Provider store={store}>
            <HomeView />
          </Provider>
      </View>
    );
  }
}

HomeView.js

import { connect } from "react-redux";
import * as actions from '../actions/index';

// call this on button click
// this.props.changeText('Aakash Kumar');

mapStateToProps = (state) => {
    return {
        username: state.userReducer.visibleTracker,
    };
}

mapDispatchToProps = (dispatch) => {
    return{
        changeText: (text) => dispatch(actions.changeText(text))
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(HomeView);

reducers>index.js

import { combineReducers } from "redux";
import userReducer from "./userReducer";

const rootReducer = combineReducers({
    userReducer
});

export default rootReducer;

reducers>UserReducer.js

import * as actions from "../actions/index";
const initialState = {
    username: "[username]"
}

export default (state=initialState, action) => {
    
    switch(action.type){
        case actions.ACTIVE_TEXT_CHANGE:
            return {...state, username: action.payload};
            break;
    }
    return state;
}

store.js

import { createStore } from "redux";

import reducers from "./reducers/index";

export default createStore(reducers);