Реагировать на установку Redux для состояния слайдера

Question

У меня есть левая боковая панель, которой я хочу поделиться с State во всем приложении, поэтому, если пользователь нажимает кнопку слайдера, он может скрыть или показать ее.Сначала я планирую показать это.Я следовал за курсом Redux, и на курорте они сделали пример извлечения сообщений из API, который совершенно отличается от того, что мне нужно, поэтому я озадачен здесь ...

Пока что я создал папку с именем actionsс двумя файлами: sliderActions.js

import { Slider } from "./types"

export function sliderUpdate() {
    return function(dispatch) {
        dispatch({
            status: "hidden"
        })
    }
}

и типами .js

export const Slider = "Slider"; 

Редукторы имеют два файла index.js

import { combineReducers } from "redux"
import postReducer from "./postReducer"

export default combineReducers({
    posts: postReducer
})

и postReducer.js

import { Slider } from "./../actions/types"

const initialState = {
    Slider: "hide"
}

export default function(state = initialState, action) {
    switch(action.type) {
        default: 
            return state;
    }
}

store.js file

import { createStore, applyMiddleware } from "redux"
import { thunk } from "redux-thunk"
import rootReducer from "./reducers"

const initialState = {};
const middleware = [thunk];
const store = createStore(
    rootReducer, 
    initialState,
    applyMiddleware(...middleware)
)

export default store

и наконец я импортировал ниже двух в App.js

import { Provider } from "react-redux"
import { store } from "./store"

и обернул весь мой код в оператор возвратаприложения с <Provider store={store}> и </Provider>

Я совершенно новичок в редуксе и не знаю, как заставить это работать, любая помощь будет оценена!

Answer 1

Действия должны иметь свойство типа, которое указывает тип выполняемого действия.Типы обычно должны быть определены как строковые константы.

Таким образом, ваш файл действий должен выглядеть примерно так

import { SLIDER } from "../constant/slide";

export function sliderUpdate() {
  return function(dispatch) {
    dispatch({
      type: SLIDER,
      status: "hidden"
    });
  };
}

Где константа SLIDER

export const SLIDER = "SLIDER";

И редуктор должен выглядеть так

import { SLIDER } from "../constant/slide";

const initialState = {
  Slider: "hide"
};

export default function(state = initialState, action) {
  switch (action.type) {
    case SLIDER:
      return Object.assign({}, state, action.data);
    default:
      return state;
  }
}

Мы не изменяем состояние. Поэтому мы создаем копию с Object.assign(), где она будет содержать новые данные.

Answer 2

Документация гласит: Действия могут не иметь неопределенного свойства "type".

Измените свое действие в функции sliderUpdate и добавьте клавишу "type".

Дляпример:

dispatch({
   type: "SLIDER_BUTTON_CLICKED",
   status: "hidden",
});

и теперь вы хотите изменить свой postReducer на:

const initialState = {
    slider: "opened"
}

export default function(state = initialState, action) {
    switch(action.type) {
        case "SLIDER_BUTTON_CLICKED": {
            return {...state, slider: action.status}
        }

        default: 
            return state;
    }
}