Question

我有调度操作，但在我的reducer中看不到任何操作类型。

这是我的行动：

export const SET_SEARCH_BRAND_TYPE = 'SET_SEARCH_BRAND_TYPE';

export const setSearchBrandType = value => ({
  type: SET_SEARCH_BRAND_TYPE,
  value,
});

减速器：

import {
  SET_SEARCH_BRAND_TYPE,
} from '../actions/searchAction';

const initialState = {
  searchBrandType: '',
};

export default (state = initialState, action) => {
  console.log('test');
  console.log(action.type); // here i can't get my action type
  switch (action.type) {
    case SET_SEARCH_BRAND_TYPE:
      return { ...state, searchBrandType: action.value };

    default:
      return state;
  }
};

我的容器：

import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as searchActions from '../../actions/searchAction';
import DropDownButton from '../dropDownButton';
import './style.css';

class SearchBar extends Component {
  state = {
    brandValues: [],
    vehicleTypes: [],
    areas: [],
  };

  componentDidMount() {
    this.prepareData();
  }

  prepareData() {
    this.setState({
      brandValues: ['BMW', 'Audi', 'M BENZ'],
      vehicleTypes: ['四門房車', '休旅車', '敞篷車', '性能跑車'],
      areas: ['台北', '台中', '台南'],
    });
  }

  handleSelectOption(selectType, selectedOption) {
    if (selectType === 'brand') {
      console.log(selectedOption);
      searchActions.setSearchBrandType(selectedOption);
    }
  }

  render() {
    return (
      <div className="searchBar">
        <div>
          <span>我要預約體驗</span>
        </div>
        <DropDownButton
          selectType="brand"
          name="廠牌"
          options={this.state.brandValues}
          handleSelectOption={this.handleSelectOption}
        />
        <DropDownButton
          selectType="vehicleTypes"
          name="車型"
          options={this.state.vehicleTypes}
          handleSelectOption={this.handleSelectOption}
        />
        <DropDownButton
          selectType="areas"
          name="地區"
          options={this.state.areas}
          handleSelectOption={this.handleSelectOption}
        />
        <div>
          <span onClick={()=> this.submitSearch()}>搜尋</span>
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => ({
  searchBrandType: state.search.searchBrandType,
});

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

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

这是商店：

import { combineReducers, createStore, applyMiddleware, compose } from 'redux';
import { routerMiddleware, routerReducer } from 'react-router-redux';
import thunk from 'redux-thunk';
import createHistory from 'history/createBrowserHistory';
import searchReducer from './reducers/searchReducer';

export const history = createHistory();

const initialState = {};
const enhancers = [];
const middleware = [
  thunk,
  routerMiddleware(history),
];
const reducer = combineReducers({
  route: routerReducer,
  search: searchReducer,
});

if (process.env.NODE_ENV === 'development') {
  const devToolsExtension = window.__REDUX_DEVTOOLS_EXTENSION__;

  if (typeof devToolsExtension === 'function') {
    enhancers.push(devToolsExtension());
  }
}

const composedEnhancers = compose(
  applyMiddleware(...middleware),
  ...enhancers,
);

const store = createStore(
  reducer,
  initialState,
  composedEnhancers,
);

export default store;

我已经尝试了一整天，我确实在我的容器中发送，但仍然无法在reducer中获取我的action.type。而redux chrome扩展并没有表明我的行动。

提前多多感谢。

Answer 1

您应该替换您的代码： searchActions.setSearchBrandType(selectedOption); 以 this.props.searchActions.setSearchBrandType(selectedOption)

P.S。之前您尝试在不调度的情况下调用操作。

动作不是发送到商店

1 个答案: