Как разобраться с редаксом?

Question

[dev-executor]

Чето ни как не могу разобраться как работает редакс. Есть store, диспатчу в нем изменения, должны ли эти изменения сразу появится в компонентах в которые пердан этот store?
Вот так привязываю store к компоненту:

const mapStateToProps = (state, ownProps) => {
    return {
        app: state.app
    }
}

const mapDispatchToProps = (dispatch, ownProps) => {
    return {
        action: bindActionCreators(AppActions, dispatch)
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(AppContainer);

//action 
export const choose = (choosed) => {
  return {
    type: 'CHOOSE,
    choosed
  };
}

//reducer
    case 'CHOOSE': {
      return Object.assign(state, { choosed: action.choosed }
      });
    }

// create store 
import { createStore } from 'redux';
import rootReducer from './reducers';

export default (initialState) => {
  return createStore(
    rootReducer,
    initialState,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  );
}

// index.js
const store = configureStore(initislState);

ReactDOM.render(
    <Provider store={store}>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </Provider>
    , document.getElementById('root'));

но когда диспатчу какието изменения во вложеных компонентах то в AppContainer this.props.app не меняется, хотя store данные менются, так и должно быть или я что то делаю не так? Если правильно, так как мне отлеживать изменения store?

Comments

[davidnum95]

можете весь код скинуть?

[dev-executor]

davidnum95, чуток подправил

Answer 1

[iBubnov]

case 'CHOOSE': {
      return Object.assign(state, { choosed: action.choosed }
      });
    }

Таким образом мутируется стейт и возвращается неизменившийся объект потому что Object.assign изменяет стейт налету
Вам нужно сделать так

case 'CHOOSE': {
      return state =  {...state, choosed: action.choosed }
 
 }

Comments

[dev-executor]

Огромное спасибо, мой провтык. Можно и через Object.assign только так Object.assign({}, state, { choosed: action.choosed }
})