reactjs React-Redux -没有为关键“硬币”提供减速器

bvjveswy  于 2023-04-29  发布在  React
关注(0)|答案(7)|浏览(107)

不知道为什么会出现以下错误。
我只是设置我的商店,行动和还原器,我还没有打电话给调度任何东西。

预期

应用程序运行正常,Redux状态未更新

结果

src/reducer/index. js

import React from 'react'
import ReactDOM from 'react-dom'

import { createStore, applyMiddleware, compose } from 'redux'
import { Provider } from 'react-redux'
import thunk from 'redux-thunk'
import reducer from './reducer'

import App from './App'
import css from './coinhover.scss'

const element = document.getElementById('coinhover');

const store = createStore(reducer, compose(
    applyMiddleware(thunk),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
));

ReactDOM.render(
    <Provider store={ store }>
        <App />
    </Provider>, element);

js

import { combineReducers } from 'redux'
import { coins } from './coins'

export default combineReducers({
    coins
});

src/reducer/actions/coins.js

import * as api from '../../services/api'
import { storage, addToPortfolio } from '../../services/coinFactory'

export const ADD_COIN = 'ADD_COIN'

export function getCoin(coin) {
    return dispatch => {
        api.getCoin(coin)
            .then((res_coin)  => addToPortfolio(res_coin))
            .then((portfolio) => dispatch(updatePortfolio(portfolio)));
    }
}

export function updatePortfolio(portfolio) {
    return {
        type: ADD_COIN,
        portfolio
    }
}

finally src/reducer/coins/index.js

import { ADD_COIN } from './actions'

const initialState = [];

export default (state = initialState, action) => {
    switch(action.type) {
        case ADD_COIN:
            return action.portfolio;
        default:
            return state;
    }
}
oknwwptz

oknwwptz1#

您的问题在于如何导入coins reducer:

import { coins } from './coins'

后者尝试获取从中的文件返回的命名导出。/硬币。
您没有使用任何命名的exports only export default,因此您只需要导入文件,如下所示:

import coins from './coins';

使用后者将导致coins将包含export default的值;这将是硬币还原器。

46scxncf

46scxncf2#

即使您的所有导入都正确导入了,但由于另一个原因,这种情况仍可能发生。循环依赖!
在我的例子中,这是因为文件中的循环依赖。我有两个循环依赖在我创建accedentally项目。例如:rootReducer.ts -> authSlice.ts -> rootReducer.ts
这些依赖项通常不容易调试。我使用this包来检查循环依赖。一旦循环依赖被移除,一切都很好。

rkttyhzu

rkttyhzu3#

啊刚刚发现它,我是进口我的硬币减速器不正确。..

import { combineReducers } from 'redux'
import coins from './coins' // because I have coins/index.js

export default combineReducers({
    coins
});

而不是

import { coins } from './coins'
yc0p9oo0

yc0p9oo04#

这是我的修正:

import { combineReducers } from 'redux'
import { coins } from './coins'

export default combineReducers({
    coinsState: coins || (() => null) // By adding this I resolved it.
});
sgtfey8w

sgtfey8w5#

如果没有什么对你有用,这可能是一个循环依赖。我有一个类似的项目,需要在切片中存储状态。有一个可用的形实转换程序,它可以为您提供状态,而无需导入存储本身。如果你有这个边缘情况,你可以从thunk得到状态。

thunkAPI.getState()
j8ag8udp

j8ag8udp6#

在我的例子中,我没有向我的reducers添加默认属性。当我添加它的时候,它起作用了。这是我的代码;

const counterReducer = (state = 0, action) => {
    switch(action.type){
      case 'INCREMENT':
        return state + 1;
      case 'DECREMENT':
          return state - 1;
      default:
        return state;    
    }
  }
  
export default counterReducer;

并合并文件;

import   counter   from './counter';
import { combineReducers } from 'redux';

const allReducers = combineReducers({
    counter: counter,
   
});

export default allReducers;
irlmq6kh

irlmq6kh7#

const products = useSelector((state) => state.products.array)
console.log(products);

当我运行它时,我得到了一个错误**无法读取未定义的属性(阅读'数组')***
那是我的商店js
code:

import { configureStore } from "@reduxjs/toolkit";
import productSlice from "./reducers/productSlice";

export const store = configureStore({
    reducer: {
        products: productSlice
    }
})

这是我的索引。js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import { store } from './redux/store';

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

这是我的产品Slice。js

import { createSlice } from "@reduxjs/toolkit";

const productSlice = createSlice({
    name: 'products',
    initialState: { array: [] },
    reducers: {
        setProductArr: (state, action) => {
            state.array = action.payload
        }
    }
})

export const { setProductArr } = productSlice.actions

export default productSlice.reducers
  • 抱歉这是我第一次问stackoverflow*

相关问题