无法使用 Redux 加载数据



我是Redux和TS的新手。我尝试学习和练习Redux和TS-编写一个简单的react应用程序。我有一个包含数据的文件,我希望我的应用程序使用Redux商店。问题是我无法获取数据。我使用AppContainer,这些数据应该作为道具。但是我有一个空对象。所以当我登录state.clients.entries时,我什么都没有。也许我的行为有问题。感谢您的帮助!这是我的代码:

export const CLIENTS_LOAD = 'CLIENTS_LOAD';
type ClientsLoadActions = {
type: 'CLIENTS_LOAD';
}
export const clientsLoadActions = (): ClientsLoadActions => ({
type: CLIENTS_LOAD,
});

import {CLIENTS_LOAD} from '../actions/clients';

type InitialStateType = {
entries: object;
loading: boolean;
}
const initialState:InitialStateType = {
entries: {},
loading: false,
};
import {MockClients} from '../mocks/clients/index';
export const clientsReducer = (state = initialState, action: any) => {
switch(action.type){
case CLIENTS_LOAD:
return {
...state,
entries: MockClients,
};
default:
return state;
}

};

import * as React from "react";
import { connect } from 'react-redux';
import {App} from '../components/App/App';
import {clientsLoadActions} from '../actions/clients';
import {AppContainerComponentProps} from './AppContainer.interface';
class AppContainerClass extends React.Component<AppContainerComponentProps>{
componentDidMount(){
this.props.clientsLoadActions();
}
render(){
const {clients} = this.props;
return(
<App clients={clients}/>
);
}
}


const mapDispatchToProps = (dispatch: any) => {
return {
clientsLoadActions: () => dispatch(clientsLoadActions()),
}
}
const mapStateToProps = (state: any, ownProps: any) =>{   
const allClients = state.clients.entries;
return {
clients: allClients,
};
}
export const AppContainer = connect(mapStateToProps, mapDispatchToProps)(AppContainerClass);

import {combineReducers} from 'redux';
import {clientsReducer} from './clients';
export const rootReducer = combineReducers({
clients: clientsReducer,
});

当我将条目声明为数组而不是对象时,它起了作用:

const initialState:InitialStateType = {
entries: [],
loading: false,
};

最新更新