时间戳

首页 > 解决方案 > 滑块状态的 React Redux 设置

reactjs - 滑块状态的 React Redux 设置

问题描述

我有一个左侧边栏，我想在整个应用程序中共享状态，因此如果用户单击滑块的按钮，用户可以将其隐藏或显示。最初我打算展示它。我正在学习 Redux 课程，并且在课程中，他们做了一个从 API 获取帖子的示例，这与我需要的完全不同，所以我在这里感到困惑......

到目前为止，我创建了一个名为 actions 的文件夹，其中包含 2 个文件，sliderActions.js

import { Slider } from "./types"

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

和 types.js

export const Slider = "Slider";

reducers 文件夹有两个文件 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 文件

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"

并将我的整个代码包装在 App 的 return 语句<Provider store={store}>中</Provider>

我对 redux 完全陌生，不知道如何使它工作，任何帮助将不胜感激！

标签： reactjsredux

解决方案

操作必须具有指示正在执行的操作类型的 type 属性。类型通常应定义为字符串常量。

所以你的动作文件应该是这样的

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()其中包含新数据。

推荐阅读