问题描述
我不确定这是否是正确的做事方式,或者甚至可能,所以在这里是我的问题.
I'm not sure if this is the correct way to do things, or if it's even possible, therefore my question here.
我在我的项目中使用react-redux,redux-thunk,json-server(用于伪数据)和打字稿.通过1个api调用,我使用应用程序的所有数据更新了数据"缩减器.此数据通过CombineReducers与其他reducer一起使用: Redux树
I'm using react-redux, redux-thunk, json-server (for dummy data) and typescript in my project. With 1 api call I update the 'data' reducer with all the data for my application. This data is used together with other reducers through combineReducers:Redux tree
我想做的是将data.labels作为prop映射到我的组件中.一旦整个api调用完成,并因此填充了data.labels,我想将此数据显示给我的前端.但是我注意到,当我的数据api调用完成时,根本不会触发componentWillReceiveProps.如果我将整个数据"属性而不是"data.labels"附加到我的组件,它就会更新.
What I'd like to do is map data.labels as prop into my component. Once the whole api call finishes, and data.labels is therefore filled, I would like to show this data to my front-end. I have however noticed that the componentWillReceiveProps is not triggered at all when my data api call is finished. It does update if I attach the whole 'data' prop to my component, instead of 'data.labels'.
减速器:
case Actions.RECEIVE:
return {
...state,
labels: action.payload.labels,
defaultLinks: action.payload.defaultLinks,
customLinks: action.payload.customLinks
};
组件:
function mapStateToProps(state: any) {
return {
labels: state.data.labels, // This will not trigger componentWillReceiveProps
function mapStateToProps(state: any) {
return {
data: state.data, // This will trigger componentWillReceiveProps
关于在不注入整个数据对象的情况下如何使它起作用的任何提示?
Any tips on how to get this to work without injecting the whole data object as prop?
修改
如果使用完整的数据",则在记录数据时会得到一个空标签数组.在获取数据之前,在componentWillReceiveProps中使用标签.成功获取数据后,我的日志显示了x个标签数量的数组.
In the case of using te full 'data', I get an empty array of labels when logging data.labels in componentWillReceiveProps before the data has been fetched. After the data has been successfully fetched, my log shows an array of x amount of labels.
以下是我使用的接口:数据接口(redux存储内的结构,以数据"为父):
Below are the interfaces I use:Data interface (structure inside redux store, with 'data' as parent):
interface Data {
labels: Label[];
defaultLinks: DefaultLink[];
customLinks: CustomLink[];
request: boolean;
failure: boolean;
}
组件中使用的道具界面:
Props interface used in my component:
interface Props {
labels: Label[];
...; // Other stuff
}
推荐答案
您可能正在寻找选择器模式: gist.github.com/abhiaiyer91/aaf6e325cf7fc5fd5ebc70192a1fa170 通常与重新选择结合使用: github. com/reactjs/reselect#reselect
You may be looking for the selector pattern: gist.github.com/abhiaiyer91/aaf6e325cf7fc5fd5ebc70192a1fa170 often used in combination with reselect: github.com/reactjs/reselect#reselect
主要优点是,您可以将状态的形状与道具的形状分开.
The primary advantage is you decouple the shape of your state from the shape of your props.
这篇关于未使用API数据触发React-Redux componentWillReceiveProps的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!