Question

我是前端开发的新手。现在我在reactJs + redux的基础上研究项目（简单的任务编辑器，没有服务器端）。我遇到了下一个问题。

我有一些组件在网址＆＃39; / addTask /＆＃39;上显示网页。

const TaskCreator = ({ tasks, onAddTask }) => {

 ...

 const addTask = () => { 

 const newTask = {
   id: newId,
   header: headerInput.value,
   description: descriptionInput.value
 }

 onAddTask(newTask);
}

return(
 <div>

     ...

    <button className='btn btn-success' onClick={addTask}>Save</button>

</div>
 );
}

export default connect(
(state) => ({
tasks: state.tasks
}),
dispatch => ({

onAddTask: (task) => {
  const payload = {
    id: task.id,
    header: task.header,
    description: task.description
  };
  dispatch({ type: 'ADD_TASK', payload });
  browserHistory.push('/');
}


})
)(TaskCreator);

当用户点击按钮Save时。 addTask致电了。在那个onAddTask方法已经过时并且ADD_TASK任务命令被删除之后。新任务添加到州后，需要重定向到网址/。

当我插入语句browserHistory.push('/')时，浏览器会重定向到网址/，但它没有使用新任务更新状态。如果我删除那样的语句browserHistory.push('/')

onAddTask: (task) => {
  const payload = {
    id: task.id,
    header: task.header,
    description: task.description
  };
  dispatch({ type: 'ADD_TASK', payload });

}

状态已更新，但浏览器未重定向。

如何异步更新状态（使用调度）并在状态更新后重定向到网址/？

感谢您提前

Answer 1

你应该知道如何在react和redux中对待异步（如链式反应）。

Redux-saga可以帮助你。 https://github.com/redux-saga/redux-saga

Answer 2

最终，我找到了解决问题的方法。

真的，我的问题是在浏览器重新加载期间清除state。当我尝试使用push( / )时，它会重新加载网页，因此state变量已清除，并且无法在'/'网址上看到新的（在'/ addTask /'页面中添加）任务。

为避免清除网页，需要返回（在浏览器中）或手动打印'/'网址。我找到了手动输入'/'url的编程模拟。要做到这一点，需要改变：

 <button className='btn btn-success' onClick={addTask}>Save</button>

链接手动重定向的to属性：

<Link className='btn btn-success' to=`/` onClick={addTask}>Сохранить</Link>

onClick处理点击（保存新任务），to重定向到'/'网址。

谢谢大家的回答。

在redux中更新状态后发送调度和重定向？

2 个答案: