React-native + Redux(Combine Reducers): Create state structure

Question

I am developing a react-native app and new to redux. I've 3 screens and almost all state of all screens dependent on each other. e.g First screen scans the product, second screen takes customer details and third screen displays the summary from of products and customer. I am hitting the wall since 2 days to create the state structure and I end up with combineReducers. But in combine reducers, each reducer maintains its own slice of state and doesn't let me access or update the state of another reducer. So, Q1. Should I continue with combieReducers or should maintain single reducer only? Q2. If combineReducers is OK, how should access or update the same state along all reducers?

score 3 · Accepted Answer · answered Oct 04 '18 at 11:29

3

for u r first question yes u have to combine because combineReducers will give all reducers data in single object

example:

const rootReducer = combineReducers({
  posts: PostsReducer,
  form: formReducer
});

inside component

function mapStateToProps(state) {
  return { posts: state.posts };
}

export default connect(mapStateToProps, { createPost })(PostsIndex);

in the above code through Redux connect you can access state which is produced by combine reducera like this.props.posts inside your component

To update the you need to triger an action which go through all reducers and based on type you can update the state

example:

export function createPost(values, callback) {
  const request = axios
    .post(`${ROOT_URL}/posts${API_KEY}`, values)
    .then(() => callback());

  return {
    type: CREATE_POST,
    payload: request
  };
}

answered Oct 04 '18 at 11:29

ravindra reddy

70
1
1
9

Yeah..I did this. But where I'm stucked is how could I access or update state between reducers? Or how could I maintain same state in two reducers, in my case _products array_ which is to be used in first screen for product scanning and also in third screen for displaying these products. – Avdhut K Oct 04 '18 at 11:35
import _ from "lodash"; import { FETCH_POSTS, FETCH_POST, DELETE_POST } from "../actions"; export default function(state, action) { switch (action.type) { case DELETE_POST: return _.omit(state, action.payload); case FETCH_POST: return { ...state, [action.payload.data.id]: action.payload.data }; case FETCH_POSTS: return _.mapKeys(action.payload.data, "id"); default: return state; } } this is my reducer here state will have all the scope – ravindra reddy Oct 04 '18 at 11:40
import * as Actions from '../Actions' import {initialState} from './State' const ProductReducer = (state = initialState, action) => { switch (action.type) { case Actions.SET_CUSTOMER: console.log('this called'); return { ...state, bill: { ...state.bill, customer: action.customer } } default: return state } } export default ProductReducer; – Avdhut K Oct 04 '18 at 11:41
refer below link – ravindra reddy Oct 04 '18 at 11:43
https://stackoverflow.com/questions/42239302/accessing-a-part-of-reducer-state-from-one-reducer-within-another-reducer – ravindra reddy Oct 04 '18 at 11:43

score 0 · Answer 2 · answered Oct 04 '18 at 11:52

0

using middleware you can achieve the funtionality

export default ({ dispatch, getState }) => next => action => {
  next(action);
 const newAction = { ...action, payload: "",state:getState () };
    dispatch(newAction);
};

answered Oct 04 '18 at 11:52

ravindra reddy

70
1
1
9

React-native + Redux(Combine Reducers): Create state structure

2 Answers2