React + react-router + redux + node 遇到的问题

#1

想把 react，redux，react-router 和 node 一起做些小应用。初步的例如怎么在 node 里渲染 react 组件，怎么通过 react-router 处理跳转，在 Universal React 这篇文章也说得很清楚。但自己想另外做个小 demo 的时候，却遇到了一些问题

先说说这个 demo 要实现的功能，就是 首页有 “login” 链接，点击跳到 /login。填写完表单后，提交即登录成功，跳回首页，“login” 链接变成 “logout”。login 还是 logout 想通过整个应用的一个 state { username: xxx } 来决定，现在问题如下：

  • form 表单的提交，是直接 summit 按钮通过 <form> 的 action 属性直接提交到后台 node，还是给 summit 按钮绑定一个事件，触发 action(不同于上一个 action) 传给 reducer 处理
  • 如果直接传给 node，可以通过与数据库匹配之后用 res.redirect() 跳转，但怎么修改整个应用的 state
  • 如果通过 reducer 处理，请求不能写在 reducer 里，那写在哪里？更新完 state 后怎么跳转

因为真的不知道要怎么构建整个 app，所以可能说得有点模糊和不清楚，如果我大方向都错了，请指正，如果有类似的 demo，也请分享，谢谢大家～

一点点背景

学习 react 有一段时间了，最近也通过 egghead 的 Getting Started with Redux 视频学习了redux, 总结在 这。

之前也通过一个 TodoApp 把 flux, reflux 和 redux 之间的区别和实现都做了一遍，也就是之前在这里放过的 simple-todo-with-react-and

有表述不清也可以提出，我再说明，再次感谢～

1 Like
#2

初学者 我也有同样的问题。。 请问有解决方案了吗

#3

我觉得异步处理会好一点,

node 根据node 返回信息 更新 浏览器的 state, react-router 其实也是一个state

react-router 现在使用 this.props.history.pushState(null, some/path) 跳转路由改变url

#4

谢谢指导 ， 我再好好研究下

#5

1.trunk

在Redux中异步请求最初是通过trunkMiddleWare实现的
一般来说，当你点击登陆之后，会dispatch一个action

dispatch({type: 'USER_LOGIN', username: 'foo'})

trunkMiddleWare就是给你一个机会在派发action之前做一些其他事情，或者派发多个action

function login (username) {
  return (dispatch) => {
    ajax(url, (result) => {
      dispatch({type: 'USER_LOGIN_SUCCSEE', result})
    })
  }
}

dispatch(login(username))

而trunkMiddleWare的作用就是判断dispatch()中的参数是不是function：

function thunkMiddleware({ dispatch, getState }) {
  return next => action =>
    typeof action === 'function' ?
      action(dispatch, getState) :
      next(action);
}

module.exports = thunkMiddleware

这点在Redux的文档中写的很明白。

之后有人提出了redux-saga，也就是把所有的side effect（负面影响）都交给saga做。reducer负责处理state的变化，saga复杂action附带的其他工作。

关于跳转的话，我是在组建中dispatch action之后，返回来一个promise，通过promise 的状态进行跳转。
跳转方法：通过redux-router提供的pushState或replaceState

#7

可以看看我 这篇文章 的总结 : )

#8

好的，非常感谢！之前离开了论坛一段时间，所以没有看到回复，再次感谢～