选择react redux中的所有checkBox函数

Question

我是react redux的新手。我正在尝试使选择所有的复选框功能与个人的复选框选择。选中所有单个复选框后，需要选中SelectAll复选框。我已经花了很多时间来做这件事，但我正在走错地方。

Action.js:-

const SELECT_CHECKBOX = "SELECT_CHECKBOX";
const SELECT_ALL_CHECK_BOX = "SELECT_ALL_CHECK_BOX";

export const selectCheckBox = (e,id) =>{
return{
type:SELECT_CHECKBOX,
event:e.target.checked,
checkBoxID:id
}
}
export const selectAllCheckBox = (e) =>{
return{
type: SELECT_ALL_CHECK_BOX,
event: e.target.checked,
}
}

减速器.js:-

const checkBoxSelects = {
selectAll: false,
checkBox : [
{label:"one",checked:false},
{label:"two",checked:true},
{label:"three",checked:false},
{label:"four",checked:false},
]
}
export const checkBoxReducer = (state = checkBoxSelects, action) => {
switch(action.type){
case SELECT_CHECKBOX: 
let checkBox = [...state.checkBox];
checkBox[action.checkBoxID].checked = action.event
let selectAll = state.checkBox.every(item => item.checked === true) ? true : false
let newArray = {
...state,
selectAll,
checkBox,
}
return newArray;
default: return state;
}
}

export const selectAllReducer = (state = checkBoxSelects, action) =>{
switch(action.type){
case SELECT_ALL_CHECK_BOX: 
state.selectAll = action.event
state.checkBox.forEach(item => item.checked = action.event)
return { ...state};
default: return state;
}
}

reducerIndex.js

import { checkBoxReducer,selectAllReducer } from './reducer';
import { combineReducers } from 'redux';

const rootReducers = combineReducers({
checkBoxHandler : checkBoxReducer,
selectAllState: selectAllReducer,
})

Container.js:-

import React from 'react'
import {selectCheckBox, selectAllCheckBox } from './action/index'
import { connect } from 'react-redux';

function CakeContainer(props){
return(
<>
<div>
<div>
<input 
type="checkBox" 
checked={props.slectAll}  
onChange={(e) => props.selectAllFn(e)}
/>
<label>select ALL</label>
</div>
{props.checkBoxData.map((item,i) => {
return (
<div>
<input 
type="checkbox" 
checked={item.checked} 
onChange = {(e) => props.onChangeSelect(e,i)}
/>
<label>{item.label}</label>
</div>
)  
})}
</div>
</>

)
}

const mapStateToProps = (state) =>{
return{
checkBoxData: state.checkBoxHandler.checkBox,
slectAll : state.checkBoxHandler.selectAll, 
}
}

const mapDispatchToProps = dispatch =>{
return{
onChangeSelect: (e,i) => dispatch(selectCheckBox(e,i)),
selectAllFn: (e) => dispatch(selectAllCheckBox(e)),
}
}

export default connect(
mapStateToProps,
mapDispatchToProps
)(CakeContainer)

export default rootReducers;

Answer 1

在您的Reducer.js中，您设置状态的方式在我看来是不正确的。现在两个组件的原始状态都是

{
selectAll: false,
checkBox : [
{label:"one",checked:false},
{label:"two",checked:true},
{label:"three",checked:false},
{label:"four",checked:false},
]
}

这意味着在你使用combineReducers后，你的商店的最终形状会看起来像

{
checkBoxHandler: {
selectAll: false,
checkBox : [
{label:"one",checked:false},
{label:"two",checked:true},
{label:"three",checked:false},
{label:"four",checked:false},
]
},
selectAllState: {
selectAll: false,
checkBox : [
{label:"one",checked:false},
{label:"two",checked:true},
{label:"three",checked:false},
{label:"four",checked:false},
]
}
}

我相信这不是你想要的。此外，请添加更多关于您想要实现的目标的描述。