Как переключить компонент React с Redux с помощью хуков? - PullRequest
Новая
       18

Как переключить компонент React с Redux с помощью хуков?

0 голосов
/ 03 октября 2019

Я пытаюсь переключить (показать / скрыть) компонент реагирования с помощью избыточного числа, но получаю сообщение об ошибке: 

Error: An error occurred while selecting the store state.

Эта ошибка исчезает при доступе к состоянию с помощью прямого вызова.

изменить это: 

const show = useSelector(state => state.toggle[id]);

на это: 

const show = useSelector(state => state.empty);

Переключить компонент 

import React from 'react';
import {useSelector} from 'react-redux';


export const Toggle = ({id, children}) => {
  const show = useSelector(state => state.toggles[id]);
  return show ? children : null;
};

Редуктор 

const initialState = {
  empty: false
};

export default (state = initialState, action) => {
  switch (action.type) {
    case 'SHOW':
      return {...state, [action.payload]: true};
    case 'HIDE':
      return {...state, [action.payload]: false};
    default:
      return state;
  }
};

Действия 

export const showToggle = id => ({type: 'SHOW', payload: id});
export const hideToggle = id => ({type: 'HIDE', payload: id});

Дочерний компонент 

import React from 'react';

export const MyComponent = ({onClick}) => {
  return (
    <div>
      Do something awesome here
      <button onClick={onClick}>Ok</button>
    </div>
  )
};

Главный компонент 

import React from 'react';
import {useDispatch} from 'react-redux';
import {Toggle} from './Toggle';
import {MyComponent} from './MyComponent';
import {showToggle, hideToggle} from './actions';

export const SomeOtherComponent = () => {
  const dispatch = useDispatch();
  const toggleId = 'empty';
  return (
    <div>
            <span>Say something<span>
            <Toggle id={toggleId}>
              <MyComponent onClick={() => dispatch(hideToggle(toggleId))}/>
            </Toggle>
            <button onClick={() => dispatch(showToggle(toggleId))}>Show my component</button>
    </div>
)};

По сути, я хочу переключать компонент по его идентификатору, потому что я хочу добавить больше компонентов, которые можно переключать.

Ответы [ 2 ]

1 голос
/ 03 октября 2019

Ваш редуктор не массив, поэтому он сломается.

Если вы измените свой редуктор на это, он будет работать? 

const initialState = [];

export default (state = initialState, action) => {
  switch (action.type) {
    case 'SHOW':
      return {...state, [action.payload]: true};
    case 'HIDE':
      return {...state, [action.payload]: false};
    default:
      return state;
  }
};

и ваш компонент Toggle на это: 

import React from 'react';
import {useSelector} from 'react-redux';


export const Toggle = ({id, children}) => {
  const show = useSelector(state => state[id]);
  return show ? children : null;
};

Альтернатива: 

const initialState = {
  show_list: [],
  // other state keys
};

export default (state = initialState, action) => {
  switch (action.type) {
    case 'SHOW':
      let show_list = state.show_list;
      show_list[action.payload] = true;
      return {...state, show_list};
    case 'HIDE':
      let show_list = state.show_list;
      show_list[action.payload] = false;
      return {...state, show_list};
    default:
      return state;
  }
};

Переключить компонент: 

import React from 'react';
import {useSelector} from 'react-redux';


export const Toggle = ({id, children}) => {
  const show = useSelector(state => state.show_list[id]);
  return show ? children : null;
};
0 голосов
/ 04 октября 2019

Ваше состояние не имеет никакого свойства с именем toggles, скорее вы сохраняете переключенное состояние непосредственно в state объекте как ключ / значение.

Поэтому измените 

const show = useSelector(state => state.toggles[id]);

до 

const show = useSelector(state => state[id]);
...