Question

我正在实现react-bootstrap-table-next，并且需要将单击的标题列值发送到数据库以在服务器端对其进行排序。我想将点击的列名称传递给redux商店。我可以获得点击登录操作的值，但我的状态不会在redux内部更新。

import { createStore } from 'redux';
import reducer from '../../reducers/index';

const initialState = window.__INITIAL_STATE__; // eslint-disable-line
const store = createStore(reducer, initialState);    
const columnClick = dataField => (event) => {
  const action = sortColName(dataField);
  store.dispatch(action);
};

export const columns = [
  {
    dataField: 'name',
    text: 'Name',
    headerEvents: {
      onClick: columnClick('name'),
    },
  }, {
    dataField: 'address',
    text: 'Address',
  }, {
    dataField: 'type',
    text: 'Type',
  }, {
    dataField: 'account_name',
    text: 'Account Name',
  }, {
    dataField: 'environment',
    text: 'Environment',
  }];

这是我的行动。

export const sortColName = (event) => {
  console.log(event);
  return {
    type: ACTION_TYPES.SORT_COL_NAME,
    data: event,
  };
};

这是我的减速机。

import * as ACTION_TYPES from '../consts/action_types';

const initialState = {
  sortColName: '',
};

export const getSortColName = (state = initialState, action) => {
  switch (action.type) {
    case ACTION_TYPES.SORT_COL_NAME:
      return {
        ...state,
        sortColName: action.data,
      };
    default:
      return state;
  }
};

这是我的store.js

import { createStore, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import logger from 'redux-logger';
import { routerMiddleware } from 'react-router-redux';
import axios from 'axios';
import rootReducer from '../reducers/index';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

export const configureStore = (history, initState) => {
  const middlewares = [thunk.withExtraArgument(axios), logger, routerMiddleware(history)];
  const store = createStore(
    rootReducer,
    initState,
    composeEnhancers(applyMiddleware(...middlewares)),
  );
  return store;
};

我在运行时遇到错误，说明窗口未定义。

我使用combineReducers将reducer连接到主index.js文件，并使用mapStateToProps获取组件中的值，但状态不会更新。

Answer 1

创建后，您需要将操作分派给redux商店。像这样：

import {createStore} from 'redux'

store = createStore(reducer, initialState)

const columnClick = dataField => () => {
  const action = sortColName(dataField);
  store.dispatch(action) // <-- MISSING LINE
};

这将更新商店的状态＆amp;通知订阅的组件。

从非响应文件调度操作时，Redux状态不会更新

1 个答案: