Question

我是Redux的新手，我有这个问题，我自己无法解决。

我创建了一个TODO列表应用程序，现在我需要在列表中添加一个新任务。用户在文本输入中写入内容，当他单击按钮时，新任务必须附加到列表中。

我已经得到了一个“添加任务”。行动。但我不知道如何从组件方法中调用它。所以我在按钮上添加了一个事件监听器，但是当我点击它时我接下来应该做什么？

class List extends React.Component{
  addTask(e){
    var title = $('[name=title]');
    title.val('');
    //what should I do?
  }

  render(){
    const mappedTasks = this.props.tasks.map(function(task){
      return (
        <li key={task.title}>{task.title}</li>
      );
    });

    return (
      <div>
        <ul>
          {mappedTasks}
        </ul>
        <input name='title' />
        <button onClick={this.addTask}>Adicionar</button>
      </div>
    );
  };
}

const mapStateToProps = function(state,ownProps){
  return {
    message: 'Hello World!',
    tasks: state.tasks
  }
}



const ListComponent = connect(
  mapStateToProps
)(List);

在这个例子中，我想从addTask方法中分配一些东西。那么从Redux上的Component方法调度的正确方法是什么？

@edit 这就是诀窍：在渲染功能

<button onClick={this.addTask.bind(this)}>Adicionar</button>

因为布兰登说我可以在方法中使用

this.props.dispatch({type:'ADD_TASK', payload: {title: title.value}});

Answer 1

我看到了几种可能的解决方案，哪一种更合适可能取决于您的特定用例。有几个问题可能会有所帮助：

此List组件connect是否已编辑到redux商店（使用connect()包中的react-redux装饰器？如果是，则为应该能够像这样简单地发送一个动作： this.props.dispatch(someActionCreator())。
您是否可以connect将此组件发送给商店？如果是这样，请装饰List组件，如下所示：connect(mapStateToProps, mapDispatchToProps)(List)。然后，您可以访问dispatch()组件中的道具List，并且可以像问题1一样继续操作。
List组件是否具有可以访问dispatch()功能的祖先。如果是这样，您可以在该级别创建一个动作调度功能，并将其作为道具传递下去，直到您到达List组件，在那里您可以调用该功能。

正如我所说，您的特定用例将决定每种方法的适用性。如果您还有其他问题，我很乐意提供帮助，请告诉我们。

Answer 2

可以使用这样的东西。

import { Component } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'

import * as TodoActionCreators from './TodoActionCreators'
console.log(TodoActionCreators)
// {
//   addTodo: Function,
//   removeTodo: Function
// }

class TodoListContainer extends Component {
  componentDidMount() {
   // Injected by react-redux:
   let { dispatch } = this.props

   // Note: this won't work:
   // TodoActionCreators.addTodo('Use Redux')

  // You're just calling a function that creates an action.
  // You must dispatch the action, too!

  // This will work:
   let action = TodoActionCreators.addTodo('Use Redux')
   dispatch(action)
}

render() {
// Injected by react-redux:
   let { todos, dispatch } = this.props

// Here's a good use case for bindActionCreators:
// You want a child component to be completely unaware of Redux.

let boundActionCreators = bindActionCreators(TodoActionCreators, dispatch)
console.log(boundActionCreators)
// {
//   addTodo: Function,
//   removeTodo: Function
// }

return (
  <TodoList todos={todos}
            {...boundActionCreators} />
)

// An alternative to bindActionCreators is to pass
// just the dispatch function down, but then your child component
// needs to import action creators and know about them.

// return <TodoList todos={todos} dispatch={dispatch} />
}
}

export default connect(
  state => ({ todos: state.todos })
)(TodoListContainer)

Answer 3

在组件中调度操作的一种最常见方法是使用mapDispatchToProps将操作置于props。然后你可以从道具派遣一个动作。

# 2 x 3
a = np.array([
  [1, 2, 3],
  [3, 2, 1],
])

# 3 x 3
b = np.array([
  [2, 1, 1],
  [2, 2, 0],
  [1, 2, 1],
])

lhs = np.expand_dims(a, axis=1)
rhs = np.expand_dims(b, axis=0)
sums = lhs + rhs

# [[[2 2 3]
#   [2 4 0]
#   [1 4 3]]
# 
#  [[6 2 1]
#   [6 4 0]
#   [3 4 1]]]

如何从Redux中的Container方法调度操作？

3 个答案: