我有一个侧边栏,我想在整个应用程序中共享状态,因此,如果用户单击滑块的按钮,则可以使其隐藏或显示。最初,我计划显示它。我正在学习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>
我对redux完全陌生,不知道如何使它工作,任何帮助将不胜感激!
答案 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;
}
}