Javascript ReactJs:从redux存储获取数据
我创建组件,将其连接到redux,初始化状态并创建reducer 组成部分:Javascript ReactJs:从redux存储获取数据,javascript,reactjs,Javascript,Reactjs,我创建组件,将其连接到redux,初始化状态并创建reducer 组成部分: import fetchReducer from './reducers/fetchReducer'; import initialState from './constants/initialState'; const store = createStore(fetchReducer, initialState, devToolsEnhancer()); class Table extends React.Com
import fetchReducer from './reducers/fetchReducer';
import initialState from './constants/initialState';
const store = createStore(fetchReducer, initialState, devToolsEnhancer());
class Table extends React.Component {
// constructor
getDataFromState = function () {
let propsContent = this.props;
let itemsStored = propsContent.itemsProp;
return itemsStored;
};
getOperationItems = function () {
let itemsStored = this.getDataFromState();
itemsStored.map((item, index) => (
<li> key={index} item={item}</li>
))};
render() {
return (
<div className={styles}>
{this.getOperationItems()}
</div>
);
}
}
const mapStateToProps = (store) => {
return {itemsProp: store.items}
};
export default connect(mapStateToProps)(Table)
ReactDOM.render(
<Provider store={store}>
<Table/>,
</Provider>,
document.getElementById("app")
);
减速器:
import initialState from '../constants/initialState';
export default function update(state = initialState) {
return state;
}
但我无法从商店获得初始数据。在调试过程中,我在方法表#getDataFromState中看到propsContent包含空({})数组,而不是预期的[{'Date':1,'Operation':1
}]
调试中,我还看到,reducer接收到初始状态,并带有正确的数据:[{'Date':1,'Operation':1}]如何注册传递给createStore的reducer?要将其用于mapStateToProps,这一点很重要: 您可以查看如何注册减速器的示例 更新
问题是如何使用连接的组件表。如果您在另一个文件中定义它,然后导入它,您的代码工作得很好,正如您所看到的不相关,但是您的
getOperationItems
函数没有返回任何内容,您需要返回itemsStored.map(…)
我不清楚“Registered reducer”下的含义。在给定的示例中,使用了减速器的组合。但是如果我不能使用“组合减速器”?请您在给出的示例中说明一下reducers注册表,什么是“fetchReducer”?你如何定义它?在MapStateTops中检索它很重要,但是从您的代码中我无法理解它。你能给我看看吗?我在index.jsx中导入了它。所以“import fetchReducer from./reducers/fetchReducer”;“好的,问题不在于如何使用减速机。抱歉,我看不出问题:(harlott,太好了!你最后的建议奏效了!早些时候我打算将提供者分离到容器组件,但由于某些原因我犹豫了。谢谢!
import initialState from '../constants/initialState';
export default function update(state = initialState) {
return state;
}