javascript - 使用 redux store 时返回 undefined 的道具

Question

我已经开始学习 react-redux 并且正在尝试相同的方法，但不知何故，道具在映射后以未定义的形式返回。分享代码流程：

下面是详细的代码，简要介绍了所使用的每个组件。

应用程序.js：

import './App.css';
import CakeContainer from './redux/cakes/CakeContainer';
import React from 'react';
import { Provider } from 'react-redux';
import store from './redux/store';

function App() {
  
  console.log(store.getState())
  return (  
    <Provider store = {store}>
      
    <div className="App">
     <CakeContainer/>
    </div>
    </Provider>
  );
}

export default App;

CakeContainer.js

import React from 'react'
import { connect } from 'react-redux'
import { buyCake } from './CakeAction'

function CakeContainer(props) {
    return (
        <div>
            <h1>Cake Container !!</h1>
            <h2>Number of cakes - {props.cake}</h2>
            <button onClick = {props.buyCake}> buy cakes</button>
        </div>
    )
}


const mapStateToProps = (state) =>{
    return {
        cake: state.cakeQuant
    }
}

const mapDispatchToProps = dispatch => {
    return {
        buyCake: () => dispatch(buyCake())
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(CakeContainer)

动作.js

import {BUY_CAKE} from './CakeTypes'

export const buyCake = () =>{
    return{
        type: 'BUY_CAKE'
    } 
}

Reducer：Reducer，我在其中传递初始状态和操作以进行进一步处理。

从“./CakeTypes”导入 { BUY_CAKE }；

const initialState = {
    cakeQunt : 10
}


const CakeReducer = (state = initialState, action)=>{
    switch(action.type){
        case 'BUY_CAKE': return {
            ...state,
            cakeQunt: state.cakeQunt - 1
        }

        default: return state;
    }
}

export default CakeReducer;

Store.js 创建 store 并将 reducer 详细信息传递给它

[![import { createStore } from "redux"; 


import CakeReducer from './cakes/CakeReducer'
const store = createStore(CakeReducer,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())

console.log(store.getState())

export default store;][1]][1]

显示道具值未定义的图像：[1]：https ://i.stack.imgur.com/EjXU1.png

标签： javascriptreactjs