Всем привет! Я новичок в редиске и тайпскрипте. На данный момент изучаю и то, и другое, сразу применяя на практике. У меня есть простое приложение на React, есть файл с данными. Изначально я получала эти данные и работала с ними без редакса, теперь же мне нужно, чтобы эти данные попали в хранилище, а оттуда была возможность отрисовать их.
Я формирую объект в редьюсере, куда кладу эти данные из файла, но почему-то приходит пустой объект. Я полагаю, что проблема может быть в редьюсере или экшене, но пока не получается исправить.
Если кто-то объяснит, как с этим разобраться или в чем у меня проблема, буду крайне признательна!
Вот код
Actions:
export const CLIENTS_LOAD = 'CLIENTS_LOAD';
type ClientsLoadActions = {
type: 'CLIENTS_LOAD';
}
export const clientsLoadActions = (): ClientsLoadActions => ({
type: CLIENTS_LOAD,
});
Reducers:
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;
}
};
Root reducer:
import {combineReducers} from 'redux';
import {clientsReducer} from './clients';
export const rootReducer = combineReducers({
clients: clientsReducer,
});
Store:
import {createStore} from 'redux';
import {rootReducer} from './reducers/index';
export const store = createStore(rootReducer);
Container:
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 * as React from 'react'
import * as ReactDOM from 'react-dom'
import {AppContainer} from './containers/AppContainer';
import {Provider} from 'react-redux';
import {store} from './store';
ReactDOM.render(
<Provider store={store}>
<AppContainer />
</Provider>,
document.getElementById('root'));