Redux 状态以替换 React 组件内部状态

Question

我想在我的 Web 应用程序的多个组件中实现一个 redux 存储。 基本上，我想将当前的内部状态迁移到 redux。

我以一个简单的收音机为例。

没有 redux 的文件(只有内部状态(：

// file Bool.js
import React from 'react';
import {FormControlLabel, Grid, Radio, RadioGroup} from "@material-ui/core";
class Bool extends React.Component {
constructor(props) {
super(props);
this.state = {
bool: 'and'
};
this.handleChange = this.handleChange.bind(this)
}
handleChange = (evt) => {
this.setState({
bool: evt.target.value
});
}
render() {
return(
<div>
<RadioGroup
row
value={this.state.bool}
onChange={this.handleChange}>
<Grid
container
direction="row"
justify="center"
alignItems="center">
<FormControlLabel
value="and"
control={<Radio
color="primary"/>}
label="And"
labelPlacement="end"/>
<FormControlLabel
value="or"
control={<Radio
color="primary"/>}
label="Or"
labelPlacement="end"/>
</Grid>
</RadioGroup>
</div>
)
};
}
export default Bool

带有 redux 的文件：

// file Bool.js
import React from 'react';
import {connect} from 'react-redux';
import {FormControlLabel, Grid, Radio, RadioGroup} from "@material-ui/core";
import {handleBool} from './Action_bool'
export class Bool extends React.Component {
constructor(props) {
super(props);
this.state = {
bool: 'and'
};
this.handleBool = this.handleBool.bind(this)
}
render() {
return(
<div>
<RadioGroup
row
value={this.state.bool}
onChange={this.handleBool}>
<Grid
container
direction="row"
justify="center"
alignItems="center">
<FormControlLabel
value="and"
control={<Radio
color="primary"/>}
label="And"
labelPlacement="end"/>
<FormControlLabel
value="or"
control={<Radio
color="primary"/>}
label="Or"
labelPlacement="end"/>
</Grid>
</RadioGroup>
</div>
)
};
}
function mapStateToProps(state) {
return {
bool: state
}
}
export default connect(mapStateToProps, {handleBool})(Bool);

行动：

// file Action_bool.js
export function handleBool(value) {
return ({
type: 'HANDLE_BOOL_CHANGE',
payload: value
});
}

还原剂：

// file Reducer_bool
const Reducer_bool = (state = 0, action) => {
switch(action.type) {
case 'HANDLE_BOOL_CHANGE':
return action.payload;
default:
return state;
}
};
export default Reducer_bool

组合减速器：

// file Combine_reducers
import {combineReducers} from 'redux';
import Reducer_bool from './Reducer_bool';
export default combineReducers({
bool: Reducer_bool
});

索引文件：

// file index.js
import React from 'react';
import ReactDOM from "react-dom";
import {createStore} from 'redux'
import {Provider} from 'react-redux'
import {Box, CssBaseline, MuiThemeProvider} from "@material-ui/core";
import theme from './Standalone/theme';
import Bool from './Standalone/Bool';
import combineReducers from './Reducer_bool'
let store = createStore(combineReducers)
ReactDOM.render (
<Provider
store={store}>
<MuiThemeProvider
theme={theme}>
<CssBaseline/>
<Bool/>
</MuiThemeProvider>
</Provider>,
document.querySelector("#root")
)

错误：

类型错误： 无法读取未定义的属性"绑定">

10 |    this.state = {
11 |      bool: 'and'
12 |    };
13 |    this.handleBool = this.handleBool.bind(this)
| ^  14 |  }

Answer 1

您可以在构造函数中放弃绑定到handleBool

请改为在onChange属性上使用箭头函数：

<RadioGroup
row
value={this.state.bool}
onChange={({ value })) => this.props.handleBool(value)}> // this is the action from redux

Answer 2

错误来自的行中的this是在当前类的上下文中搜索函数。由于该类没有函数handleBool，也不会this，并且它是未定义的。

就像@jank的回答已经说过的那样，您需要使用this.props中存在的handleBool。connect已自动将其绑定到调度函数并将其添加到您的 props 对象中。

完全删除此行this.handleBool= this.handleBool.bind(this).

您可以添加这样的本地函数，以便onChange={this.handleBool}按预期工作。

handleBool= (evt) => {
this.props.handleBool(evt.target.value);
}