@arishaYako_14

Как правильно получить данные из Redux store?

Всем привет! Я новичок в редиске и тайпскрипте. На данный момент изучаю и то, и другое, сразу применяя на практике. У меня есть простое приложение на 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'));
  • Вопрос задан
  • 2166 просмотров
Решения вопроса 1
@arishaYako_14 Автор вопроса
Все сработало после того, как вместо объекта, я сделала entries массивом, то есть так:
const initialState:InitialStateType = {
    entries: [],
    loading: false,
};
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы