为什么我无法从 redux 获取状态到我的 React 应用程序？

Question

这是我的代码。我想从 redux 状态获取成分和总价，但是当我在主应用程序中获取它时，它给出了我的未定义（this.props.ingredients 和 this.props.totalPrice）。

reducer.js


const initialState = {
    ingredients: {
        salad: 0,
        bacon: 0,
        cheese: 0,
        meat: 0,
    },
    totalPrice: 4.0
}

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case 'ADD_INGREDIENTS':
            break;

        default:
            return state;
    }
};

export default reducer

主应用（与应用连接）

......
const mapStateToProps = state => {
    return {
        ings: state.ingredients,
        tp: state.totalPrice
    }
}

export default connect(mapStateToProps)(Burgerbuilder, axios)

这给了我未定义

console.log(this.props.ings) 
console.log(this.props.tp)

这是它与商店的联系方式

import {Provider} from 'react-redux'
import {createStore} from 'redux'
import reducer from './redux/reducer';


const store = createStore(reducer)

const app = (
  <React.StrictMode>
    <Provider store={store}>
      <BrowserRouter>
        <App /> 
      </BrowserRouter>
    </Provider>
  </React.StrictMode>
)

Answer 1

您没有调用 combineReducer 函数。

例如，在你的 reducers 目录中创建一个名为 index.js 的文件，然后将此代码添加到其中

import ingredientsReducer from './reducer'
export default combineReducers(
  {
    ingredients: ingredientsReducer,
  }
);

然后在您的 main.js 文件中，当您创建商店时，将导出的 combineReducers 结果提供给它。

您可以在此处阅读有关 combineReducers 的更多信息

Answer 2

reducer 必须总是 return 一个完整的状态。在 case "ADD_INGREDIENTS": 里面你 break 而不要 return 任何东西。所以用 { type: "ADD_INGREDIENTS" } 调用一个动作会导致你的整个状态为 undefined。你需要 return state.

此外，我不明白你在 connect 中加入 axios 是想做什么。应该是 connect(mapStateToProps)(Burgerbuilder).

为什么我无法从 redux 获取状态到我的 React 应用程序？

WHY I am not able to get state from redux to my React app?

switch-statement

reactjs

redux

react-redux