Javascript 当prop函数正在更改状态时，如何使用redux？

我试图了解在传递到组件的道具被用来更改应用程序状态的情况下，如何使用redux

我有一个有效的例子

let Input=（{handleChange}）=>(
)
让文本=（{message，color}）=>(
{message}
)
let App=（{消息、颜色、句柄更改}）=>(


)
类ConnectedApp扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
颜色：“橙色”，
信息：“你好，世界”
}
this.handleChange=this.handleChange.bind（this）
}
手柄更换（id）{
返回（事件）=>{
控制台日志（id）
如果（id=='mySpecialInput'）{
this.setState（{'color'：event.target.value}）
}
}
}
render（）{
返回(
)
}
}
ReactDOM.render(
,
document.getElementById（'react\u example'）
);

---

像这样简单的东西是如何使用redux的？

下面是上面使用redux构建的代码

let{createStore}=Redux
让{connect，Provider}=ReactRedux
//反应组分
让输入=（{handleChange}）=>(
)
让文本=（{message，color}）=>(
{message}
)
let App=（{消息、颜色、句柄更改}）=>(


)
//行动
const CHANGE\u COLOR='CHANGE\u COLOR'
函数changeColorAction（颜色）{
返回{
类型：更改颜色，
颜色
}
}
//减速器
函数缩减器（状态={color:#ffa500}，操作）{
让计数=state.count
开关（动作类型）{
外壳颜色：
返回{color:action.color}
违约：
返回状态
}
}
//贮藏
let store=createStore（reducer）
//将Redux状态映射到组件道具
函数MapStateTops（状态）{
返回{
颜色：state.color，
信息：“你好，世界”
}
}
功能更改调度程序（调度）{
返回（id）=>{
返回（事件）=>{
如果（id=='mySpecialInput'）{
返回分派（changeColorAction（event.target.value））
}
}
}
}
//将Redux操作映射到组件道具
功能图DispatchToprops（调度）{
返回{
handleChange:changeColorDispatcher（调度）
}
}
//连通元件
让ConnectedApp=connect(
MapStateTops，
mapDispatchToProps
)（应用程序）
ReactDOM.render(
,
document.getElementById（'react\u example'）
);

您只需单独连接每个组件，而无需在顶级组件上使用

connect（）

并在层次结构树中传递道具

这会更方便。

---

第二个示例不起作用吗？我不太明白你的问题。@Mjohnsenger第二个示例直接取自，刚刚更新，我想我已经解决了，但仍然没有渲染。它可能没有渲染，因为应用程序没有收到消息道具。当你执行

MapStateTrops

时，实际上，您是在声明一组道具，这些道具可以反应redux将传递给您的包装组件，例如应用程序。您的mapStateToProps仅定义一种颜色。如果您将其他道具传递给ConnectedApp，它们将转发给Appname mangling。changeColor定义了两次。你为什么要麻烦把动作创建者作为道具传递到树下呢？“这似乎太错误了。@whitep4nther哪个变量是动作创建者？我的选择是什么？我发布了一个答案，这个答案更像是“前进的道路”；）

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')
);

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')
);