javascript - React Redux-State Issue

Question

I'm having quite a difficulty combining Redux with the Material-UI framework in a React SPA.

The thing is. I created a Tab with the Material-UI component and I'm trying to use Redux to control it. The redux is changing the state on my onChange={() => selectTab('1')}, but my TabContext component is not re-rendering at all.

const Tabelas = (props) => { return (
<Paper square elevation={5}>
  <TabContext  centered value={props.tab.selected} indicatorColor="primary" textColor="primary">
    <TabList centered >
      <Tab label="Listar"  onChange={() => selectTab('1')}value="1" icon={<ListIcon/>}/>
      <Tab label="Incluir" onChange={() => selectTab('2')} value="2" icon={<AddIcon/>}/>
    </TabList>
    <TabPanel value='1'>{props.lista}</TabPanel>
    <TabPanel value='2'>{props.form}</TabPanel>
  </TabContext>
</Paper>)
}const mapStateToProps = state => ({ tab : state.tab}) 
const mapDispatchToProps = dispatch => bindActionCreators({selectTab,renderTab}, dispatch)

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

Reducers:

const INITIAL_SATE = {selected: '1', visible: ''}
export default (state = INITIAL_SATE, action) => {
switch (action.type){
    case 'TAB_SELECTED':
        return { ...state, selected: action.payload}
    case 'TAB_SHOWED':
        return {...state, visible: action.payload}
    default:
        return state
}
}

Actions:

export function selectTab(tabId){
return{
    type: 'TAB_SELECTED',
    payload: tabId
}
}

While using Hooks (useState) I can easily make the transition between Tabs but with the redux, it's simply not happening. The function selectTab() changes de state of the app. But the tabcontext simply does not re-render. By the way, the Material-UI framework already does the action of the switching tab for me. So it's really simple with useState. I'm out of ideas.

question from:https://stackoverflow.com/questions/66054631/react-redux-state-issue

Answer 1

mapDispatchToProps adds a dispatching version of selectTab to your props, so you would need to call onChange={() => props.selectTab('1')}. Currently you are just calling the action creator without dispatching, which has no effect.

Please note that we generally recommend to use the react-redux hooks useSelector and useDispatch with class components instead of connect, which will make the whole usage a lot simpler. Also, as you are doing that, I assume you are already following an outdated tutorial - to learn modern redux, please follow the official tutorials, which are up-to-date.

If you want to keep using connect, please consider using the object shorthand notation for mapDispatchToProps, which is not only shorter but often also more performant.

So instead of const mapDispatchToProps = dispatch => bindActionCreators({selectTab,renderTab}, dispatch) you would just write const mapDispatchTopProps = { selectTab, renderTab }.

But really, go for the react-redux hooks ;)

PS: generally, something like "selected tab" is often considered "local state" and would not need to go into redux - mixing global state and local state is just fine.