Синхронизация состояния Redux / React / Material-UI - PullRequest
Новая
       16

Синхронизация состояния Redux / React / Material-UI

1 голос
/ 28 июня 2019

У меня есть приложение, которое извлекает информацию о пользователях из моей базы данных, чтобы заполнить панель «Настройки» для каждого пользователя. Проблема в том, что я интегрирую React Hooks и Redux.

Моя структура состоит из трех слоев. Внизу находится переключатель Material-UI, который изменяет состояние на вкл / выкл. Это выглядит так: 

const MySwitch = (props) => {

  const handleChange = event => {
    props.setState(event.target.checked);
  };

  return (
    <MuiThemeProvider theme={theme}>
      <FormControlLabel
          control={
              <Switch
                  checked={props.state}
                  onChange={handleChange}
                  inputProps={{ 'aria-label': 'secondary checkbox' }}
                  color="primary"
              />
          }
          label={props.label}
      />
    </MuiThemeProvider>
  );
};

export default MySwitch;

Этот переключатель получает значения setState и состояния со страницы настроек, которая представляет собой просто массив таких переключателей. Этот массив настроек получает исходное состояние от моего сервера, используя доступную функцию connect-redux. Это выглядит так: 

function Settings(props) {

    const [isFara, setIsFara] = useState(props.fara);
    const [isSenators, setIsSenators] = useState(props.senators);
    const [isSenateCandidates, setIsSenateCandidates] = useState(props.senateCandidates);

    useEffect(() => {
        props.startToggleFara({ fara: isFara, id: props.id, token: props.token })
    }, [isFara]);

    useEffect(() => {
        props.startToggleSenators({ senators: isSenators, id: props.id, token: props.token })
    }, [isSenators]);

    useEffect(() => {
        props.startToggleSenateCandidates({ senateCandidates: isSenateCandidates, id: props.id, token: props.token })
    }, [isSenateCandidates]);

    return (
        <div className="settings">
            <div className="setting_switch">
                <Switch 
                    label={'Foreign Lobbyists'}
                    state={isFara}
                    setState={setIsFara}
                />
            </div>
            <div className="setting_switch">
                <Switch 
                    label={'Senators'}
                    state={isSenators}
                    setState={setIsSenators}
                    className="setting_switch"
                />
            </div>
            <div className="setting_switch">
                <Switch 
                    label={'Senate Candidates'}
                    state={isSenateCandidates}
                    setState={setIsSenateCandidates}
                    className="setting_switch"
                />
            </div>
        {!props.fara && !props.senators && !props.senateCandidates && <p className="warning">You have no alerts set up.</p>}
        </div>
    );
};

const mapStateToProps = (state) => ({
    id: state.auth.id,
    fara: state.settings.fara,
    senators: state.settings.senators,
    senateCandidates: state.settings.senateCandidates,
    token: state.auth.token
});

const mapDispatchToProps = (dispatch) => ({
    startToggleFara: ({ fara, id, token }) => dispatch(startToggleFara({ fara, id, token })),    
    startToggleSenators: ({ senators, id, token }) => dispatch(startToggleSenators({ senators, id, token })),
    startToggleSenateCandidates: ({ senateCandidates, id, token }) => dispatch(startToggleSenateCandidates({ senateCandidates, id, token })),
})

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

Коммутаторы корректно обновляют значения на моем сервере при нажатии, что означает, что они запускают действия. Однако когда я ухожу от этого компонента и обновляю его, реквизиты не передаются на коммутаторы, которые по умолчанию имеют значение «false».

По какой-то причине это вызывает триггерные действия, связанные с реквизитом handleChange на каждом коммутаторе (которые передаются как startToggleFara, startToggleSenators и startToggleSenateCandidates), который затем отправляет действия и поворачивает каждую из настроек на моем сервере. на «ложь».

Как я могу подключить эти переключатели к моему хранилищу Redux, чтобы при загрузке компонента он корректно выводил состояние из резервной копии и мог также изменять это состояние?

...