Question

我在React中对Redux有问题。输入该主题的标题后，我一直在浏览一些相关的问题，但找不到与我的情况相同的问题的答案。

我有以下文件：

Index.JS

import snackbarContentReducer from '../src/shared/redux/reducers/snackbar-reducer';
import shoppingCartReducer from '../src/shared/redux/reducers/shopping-cart-reducer';
import userReducer from '../src/shared/redux/reducers/user-reducer';

const store = createStore(
    combineReducers(
        {
            //user: userReducer,
            //shopping_cart: shoppingCartReducer,
            snackbar_content: snackbarContentReducer
        }
    )
    ,window.devToolsExtension && window.devToolsExtension());


ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));

用户和购物车尚未实现，针对这些用户的操作和简化程序还没有任何代码。

App.JS

import { connect } from 'react-redux';
import { setSnackbarContent } from '../src/shared/redux/actions/snackbar-actions';

class App extends Component {

  render() {
    return (
      <BrowserRouter>
          <div>
            { console.log(this.props.snackbar_content) }
            { this.props.setSnackbarContent('nieuw') }

            //Cleared my routes here 

          </div>
      </BrowserRouter>
    );
  }
}

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

function mapStateToProps(state){
  return {
    snackbar_content: state.snackbar_content
  }
}

function mapDispatchToProps(dispatch){
  return {
      setSnackbarContent : (text) => {
        dispatch(setSnackbarContent(text));
      }
  }
}

我可以从商店获取道具（因为它们是从州映射到道具的）。但是我无法在商店中更改Snackbar_content。我收到的错误如下：

错误：给定操作“ SET_SNACKBAR_CONTENT”，减速器“ snackbar_content” 返回未定义。要忽略动作，必须显式返回以前的状态。如果您希望该减速器不具有任何价值，则可以返回null而不是未定义。

这是由以下行引起的：

dispatch(setSnackbarContent(text));

snackbar-action.JS

export const SET_SNACKBAR_CONTENT = 'SET_SNACKBAR_CONTENT';

export function setSnackbarContent(text){
    return { 
        type: SET_SNACKBAR_CONTENT, 
        payload: text
    }
}

snackbar-reducer.JS

import { SET_SNACKBAR_CONTENT } from '../actions/snackbar-actions';

export default function snackbarContentReducer(state = 'init snackbar', action){

    if(action.type === SET_SNACKBAR_CONTENT){
        return action.payload.snackbar_content;
    }

    return state;
}

为什么会出现此错误，我该如何解决？

谢谢。

PS：我对Redux还是陌生的，我已经使用了官方文档和一些YouTube视频作为参考。

Answer 1

您似乎在动作有效载荷中寻找snackbar_content，但从未设置，而是将有效载荷设置为期望状态的任何值。

换句话说，在您的化简器中，只需返回payload作为状态

if(action.type === SET_SNACKBAR_CONTENT){
    return action.payload;
}

Answer 2

你（和我）忘记在 reducer 中为 default 语句添加 switch case。

default:
   return state;

给定操作“ X”，减速器“ Y”返回未定义

2 个答案: