Answer the question
In order to leave comments, you need to log in
How to get data from Redux store correctly?
Hello! I am new to radish and typescript. At the moment I am studying both, and immediately putting into practice. I have a simple React application with a data file. Initially, I received this data and worked with it without editing, but now I need this data to get into the storage, and from there it was possible to draw it.
I form an object in the reducer, where I put this data from the file, but for some reason an empty object comes up. I believe that the problem may be in the reducer or action, but so far I can not fix it.
If someone can explain how to deal with this or what my problem is, I would be extremely grateful!
Here is the action code
:
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 {combineReducers} from 'redux';
import {clientsReducer} from './clients';
export const rootReducer = combineReducers({
clients: clientsReducer,
});
import {createStore} from 'redux';
import {rootReducer} from './reducers/index';
export const store = createStore(rootReducer);
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'));
Answer the question
In order to leave comments, you need to log in
Everything worked after instead of an object, I made entries an array, that is, like this:
const initialState:InitialStateType = {
entries: [],
loading: false,
};
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question