Redux結合Reducer和createStore，如何傳遞初始state

Question

問題：

Error: No Matching "@@redux/INITj.pbvmc" - action type

第一個棧幀引用了第一個導入的 reducer， cart_reducer ，另外 2 幀是combineReducers

我相信這個錯誤與 Redux 未能獲得初始 state 有關。

我正在嘗試做的事情：

將電子商務頁面從 useReducer / contextAPI 轉換為 Redux。 有 3 個減速器，每個減速器都有自己的初始 state。 我正在嘗試組合這些減速器並將它們傳遞給createStore() 。 我相信我當前的設置大部分是正確的，我只是不知道如何將 [preloadedState] 傳遞到createStore()

來自Redux 文檔。 我認為答案就在這里，但我無法理解該聲明。

如果您使用 combineReducers 生成減速器，則它必須是一個普通的 object，其形狀與傳遞給它的鍵的形狀相同。 否則，您可以自由傳遞您的減速器可以理解的任何內容。

import { combineReducers, createStore } from 'redux';
import cart_reducer from './cart_reducer';
import products_reducer from './products_reducer';
import filter_reducer from './filter_reducer';

const root_reducer = combineReducers({
  cartReducer: cart_reducer,
  productsReducer: products_reducer,
  filterReducer: filter_reducer,
});

const store= createStore(
  root_reducer,
  // pass initial states here... but how?
  );

然后將state傳遞給Provider

import store from './reducers/root_reducer';

function App() {
  return (
    <Provider store={store}> // here
      <AuthWrapper>
        <Router>
          <Navbar />
          <Sidebar />
          <Switch>
            <Route exact path='/'>
              <Home />
            </Route>
            <Route exact path='/about'>
              <About />
            </Route>
            <Route exact path='/cart'>
              <Cart />
            </Route>
            <Route exact path='/products'>
              <Products />
            </Route>
            <Route exact path='/products/:id'>
              <SingleProduct />
            </Route>
            <PrivateRoute exact path='/checkout'>
              <Checkout />
            </PrivateRoute>
            <Route exact path='*'>
              <Error />
            </Route>
          </Switch>
          <Footer />
        </Router>
      </AuthWrapper>
    </Provider>
  );
}

這是我的減速器之一：

import {
  ADD_TO_CART,
  CLEAR_CART,
  COUNT_CART_TOTALS,
  REMOVE_CART_ITEM,
  TOGGLE_CART_ITEM_AMOUNT,
} from '../actions';

const initialState = {
  cart: [],
  // cart: getLocalStorage(),
  total_items: 0,
  total_amount: 0,
  shipping_fee: 534,
};

function cart_reducer(state = initialState, action) {
  switch (action.type) {
    case ADD_TO_CART: {
      const { id, color, amount, product } = action.payload;
      const tempItem = state.cart.find((i) => i.id === id + color);
      if (tempItem) {
        const tempCart = state.cart.map((cartItem) => {
          if (cartItem.id === id + color) {
            let newAmount = cartItem.amount + amount;
            if (newAmount > cartItem.max) {
              newAmount = cartItem.max;
...ect
...ect

export default cart_reducer;

對於 saksh73

在一個組件中

<button
        type='button'
        className='remove-btn'
        onClick={() => dispatch(removeItem(id))}
      >

在 action.js 中

const REMOVE_CART_ITEM = 'REMOVE_CART_ITEM';

export const removeItem = (id) => {
  return { type: REMOVE_CART_ITEM, payload: id };
};

在購物車減速器中

case REMOVE_CART_ITEM: {
      const newCart = state.cart.filter((item) => item.id !== action.payload);
      return {
        ...state,
        cart: [...newCart],
      };
    }

Answer 1

你的設置是正確的。 對於初始 state，您可以在各自的初始 state 中擁有每個減速器的初始 state。

如果您不使用任何中間件，您的操作必須返回 object。 如果您想使用任何中間件，即 redux thunk、redux saga，那么您必須在createStore中傳遞第二個參數。

這是一個例子：

import { createStore, applyMiddleware } from "redux";
import logger from "redux-logger";
import thunk from "redux-thunk";
import { combineReducers } from "redux";

import signUp from "./signUp";
import login from "./login";
import user from "./user";

const rootReducer = combineReducers({
  signUp,
  login,
  user,
});

const store = createStore(rootReducer, applyMiddleware(thunk, logger));

export default store;

動作示例：

export function logIn(email, password) {
        dispatch({
          type: "LOGIN_SUCCESS",
          payload: {
            email: email,
            password: password
          }
        });
  };

Answer 2

該文檔只是意味着您需要為每個具有相同密鑰的子減速器傳遞初始 state 。

const store= createStore(
  root_reducer,
  // pass initial states with the same key 
  {
    cartReducer: cart_reducer_state,
    productsReducer: products_reducer_state,
    filterReducer: filter_reducer_state
  }
);