Question

嘿，我现在看了一堆帮助文件，似乎无法解决问题。大多数建议使用的设置与我使用的设置不同。其他人没有的主要问题是注销功能。您能建议另一种处理登出方式吗？

这是我的“组合减速器”的index.js：

import { combineReducers } from 'redux';
import { connectRouter } from 'connected-react-router';
import { LOGOUT_USER } from '../constants/index';

/* App Reducer Files */
import app from './app/reducer';
import accountData from './account/reducer';
import employeeData from './employee/reducer';
import locationData from './location/reducer';
import googleData from './google/reducer';
import requestData from './request/reducer';
import menuItemData from './menuItem/reducer';
import orderData from './order/reducer';

/* Public Reducer Files */
import valorData from './valor/reducer';

const appReducer = history => combineReducers({
    router: connectRouter(history),
    app,
    accountData,
    employeeData,
    locationData,
    googleData,
    requestData,
    menuItemData,
    orderData,

    // Public
    valorData,
});

const rootReducer = history => (state, action) => {
    if (action.type === LOGOUT_USER) {
        state = undefined;
    }
    return appReducer(history, state, action);
};

export default rootReducer;

还有我的store.js：


import { createStore, applyMiddleware, compose } from 'redux';
import thunkMiddleware from 'redux-thunk';
import { createLogger } from 'redux-logger';
import { routerMiddleware } from 'connected-react-router';
import rootReducer from '../services';

import history from '../history';

const debugware = [];
if (process.env.NODE_ENV !== 'production') {
    debugware.push(createLogger({
        collapsed: true,
    }));
}

export default function configureStore(initialState) {
    const store = createStore(
        rootReducer(history),
        initialState,
        compose(
            applyMiddleware(
                routerMiddleware(history),
                thunkMiddleware,
                ...debugware,
            ),
        ),
    );

    if (module.hot) {
        // Enable Webpack hot module replacement for reducers
        module.hot.accept('../services', () => {
            const nextRootReducer = require('../services/index').default;
            store.replaceReducer(nextRootReducer);
        });
    }

    return store;
}

在我升级到新的路由器版本之前，这是可行的。再次，主要问题是注销。如果我只是导出appReducer，它可以正常工作，但不注销。

Answer 1

哇。发布后，我会再尝试一件事...

const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // 1
    entry: './src/index.js',

    /////////  BABEL ///////////////
    module: {
        rules: [
          {
            test: /\.(js)$/,
            exclude: /node_modules/,
            use: ['babel-loader']
          }
        ]
      },
      resolve: {
        extensions: ['*', '.js']
      },
    ////////////////////////
    ///////// Plugins ///////////
    plugins: [
        new HtmlWebpackPlugin({
            title: 'Hello Webpack bundled JavaScript Project',
            template: './src/index.html'
          })
    ],
    // 2
    output: {
      path: __dirname + '/dist',
      publicPath: '/',
      filename: 'bundle.js'
    },
    // 3
    devServer: {
      contentBase: './dist'
    }
  };

Answer 2

为什么返回未定义状态？而是返回

if (action.type === LOGOUT_USER) {
    return{ ...state, user: [] }
}

它基本上以用户身份返回并清空数组。

注销带有历史，状态和操作错误的React Reducer

2 个答案: