我使用react和redux,API返回数据。在useDispatch
中写入的数据如何在其他组件中可用。customerId
如何在所有组件中可用。我创建了一个调用API的代码,并在响应中返回数据。我还创建了一个减速器。不知道如何做到这一点,使customerId
将是可用的。
{
"sessionId": "5f9f0de7-c7b3-3029",
"customerId": "410742",
"recepientId": "122",
"keyPropertiesList": [
{
"id": 267076,
"properties": {
"customer1": {
"firstName": "test",
"lastName": "A",
"fullName": "test A”
},
"userDetail": {
"userId": "3770930",
"name": "Sam"
},
"locationID": "03144"
}
}
],
"timeStamp": "2023-05-19T06:12:32Z"
}
const test = () => {
const [sessionInfo, setsessionInfo] = useState(useSelector(state => state.app.DataReducer.sessionDetails));
const uDispatch = useDispatch();
useEffect(() => {
sessionInformation();
async function sessionInformation() {
const session_ID = '5f9f0de7-c7b3-3029'
console.log("sessionInformaiton: " + session_ID)
await SessionInformationService({ sessionId: session_ID })
.then((result) => {
console.log("Result: " + JSON.stringify(result));
if (result.data !== undefined) {
setsessionInfo(result.data);
}
});
}
uDispatch(types.updateData({
sessionDetails: {
customerId: sessionInfo.customerId,
customerfirstName: sessionInfo.firstName,
customerlastName: sessionInfo.lastName,
customerfullName: sessionInfo.fullName,
}
})
);
}, []);
return (
<>
</>
)
};
export default test;
还原剂
import * as types from './action';
export const initialState = {
sessionDetails: {
customerId: '',
customerfirstName: '',
customerlastName: '',
customerfullName: ''
}
}
const Datareducer = (state = initialState, action) => {
switch (action.type) {
case types.UPDATE_DATA:
const output = action.payload;
if (output.sessionDetails) {
state.sessionDetails = output.sessionDetails;
}
return {
...state,
}
break;
default:
return state;
}
}
export default Datareducer;
action.js
export const UPDATE_DATA = 'UPDATE_DATA';
export const updateData = payload => ({
type: UPDATE_DATA,
payload
});
1条答案
按热度按时间wn9m85ua1#
要解决的第一个问题是reducer函数中的状态突变。
state.sessionDetails = output.sessionDetails;
改变当前状态对象。浅复制先前的状态引用 *,然后 * 覆盖属性。有关详细信息,请参见Immutable Update Patterns。第二个问题是
Test
组件不能正确地管理获取数据和更新存储。它在sessionInfo
本地状态变量中缓存来自redux的sessionDetails
状态的副本,但useEffect
同时获取会话数据 * 和 * 调度updateData
操作,该操作只是将未更新的sesstionInfo
本地状态发送回存储。实际上,Redux状态不会使用填充的数据进行更新。不需要本地的
sessionInfo
状态,useEffect
直接挂接、获取和分派数据。React组件也使用PascalCase名称,
test
不是有效的React组件,但Test
是。重命名功能组件。使用
useSelector
钩子访问状态。选择器函数遵循通过组合归约器形成的状态结构。示例: