我正在尝试使用@ reduxjs / Toolkit触发一个简单的操作,但是它不起作用。
我看到该动作已分派,但就像分片减速器没有在听它一样。
const say = createAction("ui/say", what => ({ payload: what }));
const uiSlice = createSlice({
name: "ui",
initialState: { said: "" },
reducers: {
[say.type]: (state, action) => {
console.log("saying", action.payload); //<-- not showing, why?
state.currentList = action.payload;
}
}
});
const store = configureStore({
reducer: combineReducers({
ui: uiSlice.reducer
})
});
const Chat = () => {
const dispatch = useDispatch();
const [whatToSay, setWhatToSay] = useState("");
const whatWasSaid = useSelector(state => state.ui.said);
const onSubmit = e => {
e.preventDefault();
dispatch(say(whatToSay));
setWhatToSay("");
};
return (
<div>
<form onSubmit={onSubmit}>
<input type="text" onChange={e => setWhatToSay(e.target.value)} />
<button>Say</button>
</form>
{whatWasSaid ? <p>You said: {whatWasSaid}</p> : <p>Say something</p>}
</div>
);
};
这是一个最小的复制示例:https : //codesandbox.io/s/redux-toolkit-0tzxs?file=/src/index.js
我认为您不匹配createSlice
API。
从您的代码中,您尝试实现一个动作的侦听器,因此您可能想使用extraReducers
:
const uiSlice = createSlice({
name: "ui",
initialState: { said: "" },
// Not reducers: {}
extraReducers: {
[say.type]: (state, action) => {
console.log("saying", action.payload);
state.currentList = action.payload;
}
}
});
注意API的reducers
属性createSlice
:
reducers: Object<string, ReducerFunction | ReducerAndPrepareObject>
如果要在其中使用say
,reducers
应为:
const say = (state, payload) => {
console.log("saying", payload);
state.currentList = payload;
};
const uiSlice = createSlice({
name: "ui",
initialState: { said: "" },
reducers: { say }
});
// Usage
dispatch(uiSlice.actions.say(whatToSay));
@markerikson:带有
createSlice
,reducers字段用于定义reducer并生成将与这些reducer匹配的操作。该extraReducers
字段用于处理其他地方已经定义的操作。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句