Redux数据流从减速器到容器

由于我刚接触redux，这里有一个关于redux中数据流的关键问题

据我所知，我创建了一个组件CountN：

import React from 'react'

import styles from '../../features/counter/Counter.module.css'


const CountN = (props) => {
     
    const {countValue,actions} = props;
 
    
   

     return (
    
      <div>
           <div className={styles.row}>
                <button
                  className={styles.button}
                  aria-label="Increment value"
                  onClick={actions.increment}  
                >
                +
                </button>
                
                <span className={styles.value}>{ countValue }</span>
                
                <button
                  className={styles.button}
                  aria-label="Decrement value"
                  onClick={actions.decrement}
                >
                 -   
                </button>
           </div>
     </div>

          )

     }
        

export default CountN

为了管理状态，我创建了Reducer来设置状态：

减速器如下：

import * as types  from '../constants/CountTypes';

const initialState = [{
    value: 0,
    payload: 0,

}]

 const counter = (state=initialState,action)=> {
    switch (action.type){
        case types.Increment:
            return [{
                value: state.value + 1,
                payload: 0,
            }]
        case types.Decrement:
            return [
                ...state,
                {
                    value: state.value - 1
                }
          
            ]
        case types.IncrementByAmount:
            return [{
                value: state.value + action.payload ,
                payload: action.payload
            }     
            ]
        default:
            return state
    
    }
};

export default counter;

另外，我使用“CreateStore（reducer）”创建一个存储来存储数据

现在问题是我得到了一个错误：

TypeError:无法读取未定义的属性“增量”

据我所知，国家没有定义

有专家能帮我找出哪个部分是错误的，为什么数据没有通过“道具”传递到容器中

---

非常感谢

您的代码应该可以工作，但我确实对状态做了一些更改，您将其定义为数组，但我不明白为什么我将其更改为对象。您的MpStastOutPoPS不认为该状态是数组，因此可能是一个错误。请参阅下面代码中我所做更改的注释

const{Provider，connect}=ReactRedux；
常数{
createStore，
applyMiddleware，
组成
作为创造者，
}=重复次数；
//我将initialState更改为对象而不是数组
常量初始状态={
值：0，
有效载荷：0，
};
//动作类型
常量类型={
增量：“增量”，
减量：“减量”，
IncrementByAmount:“IncrementByAmount”，
};
//动作创造者
常量CountActions={
增量：（）=>（{type:types.increment}），
减量：（）=>（{type:types.decrement}），
};
const reducer=（state=initialState，action）=>{
开关（动作类型）{
案例类型。增量：
//更改为对象
返回{
值：state.value+1，
有效载荷：0，
};
案例类型。减量：
//更改为对象
返回{
……国家，
值：state.value-1，
};
案例类型。按金额递增：
//更改为对象
返回{
值：state.value+action.payload，
有效载荷：action.payload，
};
违约：
返回状态；
}
};
//使用redux开发工具创建存储
康斯特康塞恩汉斯酒店=
窗口。uuu REDUX_vtools_uextension_uuucompose_uu124; COMPOSE；
const store=createStore(
减速器，
初始状态，
复合致癌物(
applyMiddleware（（）=>（下一步）=>（操作）=>
下一步（行动）
)
)
);
常量计数n=（道具）=>{
常量{countValue，actions}=props；
返回(
+
{countValue}
-
);
};
常量mapStateToProps=（状态）=>({
countValue:state.value，
});
const mapDispatchToProps=（调度）=>({
操作：bindActionCreators（CountActions、dispatch），
});
const App=connect(
MapStateTops，
mapDispatchToProps
)（n）；
ReactDOM.render(
,
document.getElementById（'root'））
);
您的代码应该可以工作，但我确实对状态做了一些更改，您将其定义为数组，但我看不出将其更改为对象的原因。您的MpStastOutPoPS不认为该状态是数组，因此可能是一个错误。请参阅下面代码中我所做更改的注释


const{Provider，connect}=ReactRedux；
常数{
createStore，
applyMiddleware，
组成
作为创造者，
}=重复次数；
//我将initialState更改为对象而不是数组
常量初始状态={
值：0，
有效载荷：0，
};
//动作类型
常量类型={
增量：“增量”，
减量：“减量”，
IncrementByAmount:“IncrementByAmount”，
};
//动作创造者
常量CountActions={
增量：（）=>（{type:types.increment}），
减量：（）=>（{type:types.decrement}），
};
const reducer=（state=initialState，action）=>{
开关（动作类型）{
案例类型。增量：
//更改为对象
返回{
值：state.value+1，
有效载荷：0，
};
案例类型。减量：
//更改为对象
返回{
……国家，
值：state.value-1，
};
案例类型。按金额递增：
//更改为对象
返回{
值：state.value+action.payload，
有效载荷：action.payload，
};
违约：
返回状态；
}
};
//使用redux开发工具创建存储
康斯特康塞恩汉斯酒店=
窗口。uuu REDUX_vtools_uextension_uuucompose_uu124; COMPOSE；
const store=createStore(
减速器，
初始状态，
复合致癌物(
applyMiddleware（（）=>（下一步）=>（操作）=>
下一步（行动）
)
)
);
常量计数n=（道具）=>{
常量{countValue，actions}=props；
返回(
+
{countValue}
-
);
};
常量mapStateToProps=（状态）=>({
countValue:state.value，
});
const mapDispatchToProps=（调度）=>({
操作：bindActionCreators（CountActions、dispatch），
});
const App=connect(
MapStateTops，
mapDispatchToProps
)（n）；
ReactDOM.render(
,
document.getElementById（'root'））
);

您好，HMR，非常感谢您这么好的解释，我按照您所修改的那样做了，但是代码仍然不起作用，它会产生相同的问题，可能是因为我将它们分开放在不同的文件中导致了问题？所以我找到了一个解决方案，将组件CountN放入容器中，它工作得很好，仍然不知道为什么当我将CountN从容器中分离出来时无法工作，但我得到的印象是，当我们调用“连接”存储时，当代码分离时，状态并没有初始化。您好，HMR，非常感谢您的解释，我按照你修改的那样做了，但是代码仍然不起作用，它产生了相同的问题，可能是因为我把它们分开放在不同的文件中，导致了这个问题？因此，我找到了一个解决方案，将组件CountN放入容器中，它工作得很好，仍然不知道为什么当我将CountN从容器中分离出来时无法工作，但我得到的印象是，当我们调用“连接”存储时，当t
import * as types  from '../constants/CountTypes';

const initialState = [{
    value: 0,
    payload: 0,

}]

 const counter = (state=initialState,action)=> {
    switch (action.type){
        case types.Increment:
            return [{
                value: state.value + 1,
                payload: 0,
            }]
        case types.Decrement:
            return [
                ...state,
                {
                    value: state.value - 1
                }
          
            ]
        case types.IncrementByAmount:
            return [{
                value: state.value + action.payload ,
                payload: action.payload
            }     
            ]
        default:
            return state
    
    }
};

export default counter;