当 prop 函数改变状态时如何使用 redux？

Question

我正试图围绕在传递给组件的 prop 应该用于更改应用程序状态的情况下如何使用 redux。

我有一个工作示例here。

let Input = ({handleChange}) => (
  <input type="text" onChange={handleChange('mySpecialInput')} />
)

let Text = ({message, color}) => (
  <span style={{color}}>{message}</span>
)

let App = ({message, color, handleChange}) => (
  <div>
    <Text message={message} color={color} /> <br />
    <Input handleChange={handleChange} />
  </div>
)

class ConnectedApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      color: 'orange',
      message: 'Hello World'
    }
    this.handleChange = this.handleChange.bind(this)
  }
  handleChange(id) {
    return (event) => {
      console.log(id)
      if (id === 'mySpecialInput') {
        this.setState({'color': event.target.value})
      }
    }
  }
  render() {
    return (
      <App 
        message={this.state.message} 
        color={this.state.color} 
        handleChange={this.handleChange} />
    )
  }
}

ReactDOM.render(
  <ConnectedApp/>,
  document.getElementById('react_example')
);

如何使用 redux 来处理像这样简单的事情？

Answer 1

您可以简单地单独连接每个组件，而不是在顶级组件上使用 connect() 并在层次结构树中向下传递道具。

这样会更方便。
See a working example!

Answer 2

这是上面使用 redux 构建的代码！

Working Example

let {createStore} = Redux
let {connect, Provider} = ReactRedux

// React component
let Input = ({handleChange}) => (
  <input type="text" onChange={handleChange('mySpecialInput')} />
)

let Text = ({message, color}) => (
  <span style={{color}}>{message}</span>
)

let App = ({message, color, handleChange}) => (
  <div>
    <Text message={message} color={color} /> <br />
    <Input handleChange={handleChange} />
  </div>
)

// Action

const CHANGE_COLOR = 'CHANGE_COLOR'

function changeColorAction(color) {
  return {
    type: CHANGE_COLOR,
    color
  }
}

// Reducer
function reducer(state = {color: "#ffa500"}, action) {
  let count = state.count
  switch (action.type) {
    case CHANGE_COLOR:
      return { color: action.color }
    default:
      return state
  }
}

// Store
let store = createStore(reducer)

// Map Redux state to component props
function mapStateToProps(state) {
  return {
    color: state.color,
    message: "Hello World"
  }
}

function changeColorDispatcher (dispatch) {
  return (id) => {
    return (event) => {
      if (id === 'mySpecialInput') {
        return dispatch(changeColorAction(event.target.value))
      }
    }
  }
}

// Map Redux actions to component props
function mapDispatchToProps(dispatch) {
  return {
    handleChange: changeColorDispatcher(dispatch)
  }
}

// Connected Component
let ConnectedApp = connect(
  mapStateToProps,
  mapDispatchToProps
)(App)

ReactDOM.render(
  <Provider store={store}>
    <ConnectedApp/>
  </Provider>,
  document.getElementById('react_example')
);