Question

我想在Web应用程序的多个组件中实现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")
  )

错误：

TypeError：无法读取未定义的属性“ bind”

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

Redux状态替换React Component内部状态

0 个答案: