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

0
votes

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?

2
reactjsreact-nativereduxreact-redux

2 Answers

3
votes

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
  };
}
0
votes

using middleware you can achieve the funtionality

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