Как прилинковать данные из redux к компоненту?

Question

[Andrey Ka]

Привет, у меня беда, изучаю редакс и что-то идет не так...
Короче, нужно при инициализации получить данные с сервера. Создал экшены, редюсеры и стор законнектил все это к компоненту, но он (компонент) не хочет видеть что там. Сам редакс отрабатывает нормально, добавил миделверы в косольке выводится все правильно все данные подхватывает с сервера.

Приведу листиг:

app.js

import rootReducer from './redux/reducers';
import { createLogger } from 'redux-logger';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunkMiddleware from 'redux-thunk'

const loggerMiddleware = createLogger();
const store = createStore(
    rootReducer,
    applyMiddleware(
        thunkMiddleware,
        loggerMiddleware
    )
);

const App = () =>  {
    return (
        <Provider store={store}>
                    <BrowserRouter basename={process.env.PUBLIC_URL}>
                        <Switch>
                            ...
                        </Switch>
                    </BrowserRouter>
        </Provider>
    );
};

export default App;

actions.js

spoiler

export const fetchChannelsPending = () => {
    return {
        type: types.FETCH_CHANNELS_PENDING,
        pending: true
    }
};

export const fetchChannelsSuccess = (channels) => {
    return {
        type: types.FETCH_CHANNELS_SUCCESS,
        channels: channels
    }
};

export const fetchChannelsError = (error) => {
    return {
        type: types.FETCH_CHANNELS_ERROR,
        error: error
    }
};

reducers.js

spoiler

import {
    FETCH_CHANNELS_ERROR, FETCH_CHANNELS_SUCCESS, FETCH_CHANNELS_PENDING
} from '../types';

const initialState = {
    pending: false,
    channels: [],
    error: null
};

export function channelsReducer(state = initialState, action) {
    switch(action.type) {
        case FETCH_CHANNELS_PENDING:
            
            return {
                ...state,
                pending: true
            };
            
        case FETCH_CHANNELS_SUCCESS:
            return {
                ...state,
                pending: false,
                channels: action.properties
            };
            
        case FETCH_CHANNELS_ERROR:
            
            return {
                ...state,
                pending: false,
                error: action.error
            };
            
        default:
            return state;
    }
}

export const getChannels = state => state.channels;
export const getChannelsPending = state => state.pending;
export const getChannelsError = state => state.error;

сам компонент

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import fetchChannelsAction from './fetchChannels';
import { getChannelsError, getChannels, getChannelsPending } from '../../redux/reducers';

....

class ChannelList extends React.Component {

    componentDidMount() {
        let ch = this.props.fetchChannels(); // сам фетч выполняется
        console.log(ch); //undefined!!!!
    }

    renderChannels(channels) {...}
    
    ...


    render() {
        const { channels, pending } = this.props;

        // pending is undefined!
        if (pending) {
            return <ChannelPlaceholders count={5} />
        }

        return <>render channels here</>
   }
}

const mapStateToProps = state => ({
    error: getChannelsError(state),
    channels: getChannels(state),
    pending: getChannelsPending(state)
});

const mapDispatchToProps = dispatch => bindActionCreators({
    fetchChannels: fetchChannelsAction
}, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(ChannelList);

Простите за длинный листинг, но что я делаю не так?

вот еще fetch.js он нормально работает, возвращает данные, но все же

spoiler

const fetchChannels = () => {
    return dispatch => {
        dispatch(fetchChannelsPending());

        fetch('/url/api/channels')
            .then(res => res.json())
            .then(res => {
                if(res.error) {
                    throw(res.error);
                }

                dispatch(fetchChannelsSuccess(res));

                return res;
            })
            .catch(error => {
                dispatch(fetchChannelsError(error));
            })
    }
};

export default fetchChannels;

Answer 1

[Andrey Ka]

В общем не понятно, почему не работает

const rootReducer =  combineReducers({
    channelsReducer, theDefaultReducer
});

Почему он не сливает редюсеры?

Разобрался, спасибо :)