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的变量。

触发状态变更

1 个答案: