A
A
arishaYako_142020-10-19 13:35:43
Frontend
arishaYako_14, 2020-10-19 13:35:43

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,
});

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'));

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
arishaYako_14, 2020-10-19
@arishaYako_14

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 question

Ask a Question

731 491 924 answers to any question