React Redux设置以了解滑块状态

时间:2019-01-30 16:50:25

标签: reactjs redux

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

到目前为止,我创建了一个名为action的文件夹,其中包含2个文件, slideActions.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"

并用<Provider store={store}></Provider>

将我的整个代码包装在App的return语句中

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

2 个答案:

答案 0 :(得分:2)

动作必须具有type属性,该属性指示正在执行的动作的 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()创建一个副本,其中将包含新数据。

答案 1 :(得分:1)

文档说:操作可能没有未定义的“类型”属性。

在sliderUpdate函数中更改操作并添加“类型”键。

例如:

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;
    }
}