Вызвать изменение состояния

Question

У меня есть список каналов здесь. Я добавил событие onClick для каждого из них. Когда событие происходит, значение цели обновляет полезную нагрузку моего действия selectChannel (selectedChannel). Только редуктор не срабатывает. Действие обновляет полезную нагрузку, но следующее состояние не будет обновлено.

Я действительно не понимаю, где моя ошибка, я создал действие с помощью функции, которую я использовал mapDispatchToProps для отправки действия mapStateToProps, чтобы выбрать данные из магазина. Я видел в своей консоли, что событие работает хорошо, он изменил полезную нагрузку моего действия selectChannel (selectedChannel). Но в этот момент мой редуктор не будет работать.

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { Provider } from 'react-redux';
    import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
    import { logger } from 'redux-logger';

    // internal modules
    import App from './components/app';
    import '../assets/stylesheets/application.scss';
    import messagesListReducer from './reducers/messages-list-reducer';
    import channelsListReducer from './reducers/channels-list-reducer';
    import selectedChanelReducer from './reducers/selected-channel-reducer';
    import currentUsernameReducer from './reducers/current-username-reducer';


    // State and reducers
    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
    const middlewares = composeEnhancers(applyMiddleware(logger));

    const reducers = combineReducers({
      messages: messagesListReducer,
      channels: channelsListReducer,
      selectedChannel: selectedChanelReducer,
      currentUser: currentUsernameReducer
    });

    // render an instance of the component in the DOM
    ReactDOM.render(
      <Provider store={createStore(reducers, {}, middlewares)}>
        <App />
      </Provider>,
      document.getElementById('root')
    );


    import React, { Component } from 'react';
    import { connect } from 'react-redux';
    import { bindActionCreators } from 'redux';


    import { listChannels, selectChannel } from '../actions';
    // import City from '../containers/city';


    class ListChannels extends Component {
      componentWillMount() {
      }

      render() {
        return (
          <div className="channels__list list" >
            <h2>Redux Chat</h2>
            {this.props.channelsList.map((channel) => {
              return (
                <div className="list" key={channel} onClick={() => this.props.selectChannel(channel)}>
                  <h4 >{channel}</h4>
                </div>
              );
            })
            }
          </div>
        );
      }
    }

    function mapDispatchToProps(dispatch) {
      return bindActionCreators(
        {
          listChannels: listChannels,
          selectChannel: selectChannel
        }, dispatch
      );
    }

    function mapStateToProps(state) {
      return {
        channelsList: state.channels,
        selectedChannel: state.selectedChannel
      };
    }


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



SelectedChannel reducer

    import { selectChannel, SELECT_CHANNEL } from '../actions/index';


    export default function (state = 'general', action) {
      if (state === undefined) {
        return ["he"];
      }
      // Here I tried to debug by this way, but I can't fin how to trigger, the reducer 

      if (action.type === SELECT_CHANNEL) {
        console.log(action.payload);
        return action.payload;
      }
      return state;
    }
    ````
    // TODO: add and export your own actions
    const initialState = {
      messages: [],
      channels: ['general', 'react', 'paris'],
      currentUser: prompt("What is your username?") || `anonymous${Math.floor(10 + (Math.random() * 90))}`,
      selectedChannel: 'general'
    };

    const MESSAGE = 'MESSAGE';
    const SET_CHANNELS = 'SET_CHANNELS';
    const SET_USER = 'SET_USER';
    const SELECT_CHANNEL = 'SELECT_CHANNEL';

    export default SELECT_CHANNEL;

    export function setMessages(messages) {
      return {
        type: MESSAGE,
        payload: messages
      };
    }

    export function listChannels() {
      return {
        type: SET_CHANNELS,
        payload: initialState.channels
      };
    }

    export function setUser() {
      return {
        type: SET_USER,
        payload: initialState.currentUser
      };
    }

    export function selectChannel(selectedChannel) {
      return {
        type: SELECT_CHANNEL,
        payload: selectedChannel
      };
    }

Answer 1

Я не экспортировал переменную, которая определила action.type.

Answer 2

Попробуйте с этим для вас mapDispatchToProps

const mapDispatchToProps = {
      listChannels,
      selectChannel,
}

А где вы это используете?

const initialState = {
  messages: [],
  channels: ['general', 'react', 'paris'],
  currentUser: prompt("What is your username?") || `anonymous${Math.floor(10 + (Math.random() * 90))}`,
  selectedChannel: 'general'
};