Question

我目前正在使用Redux + ReactJS，并创建了一个讨论论坛。我有一个功能，用户输入新帖子的标题和内容，一旦提交，它将创建一个新帖子。

点击帖子后，它会指向新页面，页面会填写用户输入的标题和内容。我在创建新帖子时得到了功能，但我似乎无法想象如何生成新页面（用户专用于新创建的帖子的url子目录）。

任何通过ReactJS + Redux风格实现它的建议或指导都将非常感激。提前谢谢！

UPDATE ** 在我的postReducer.js

中

function getId(posts) {
  return posts.reduce((maxId, post) => {
  return Math.max(post.id, maxId)
  }, -1) + 1
}

let postReducer = function(posts = [], action) {
  switch (action.type) {
case 'ADD_POST':
  return [{
    title: action.title,
    detail: action.content,
    id: getId(posts)
  }, ...posts]

default:
  return posts;
  }
}

export default postReducer

在我的client.js中，如何调用新生成的'id'属性用于client.js中动态路由的param？

let initialState = {
  posts: [{
    id: 0,
    title: 'Discussion Board Rules',
    detail: 'Welcome to Discussion Board Section!'
  }]
}

let store = configureStore(initialState)

render(
  <div>
    <Provider store={store}>
      <Router history={hashHistory}>
        <Route
          path="/"
          component={App}
        >
            <IndexRoute
              component={MainCard}
            />
            <Route
              component={FirstPage}
              path="Discussion"
            />
       <Route
              component={Post}
              path="/posts/:id" //**Want to call on the newly generated 'id' for here
            />
        </Route>
      </Router>
    </Provider>
  </div>,
  document.getElementById('app')
)

Answer 1

我就是这样做的：

我有一个动作创建者向我的API发送帖子请求以创建新帖子。我的API将新帖子保存在MongoDB中，后者生成一个ID。如果你想要更漂亮的URL，你也可以发送一个独特的slug。 API在其响应中返回创建的帖子的ID，其状态为200。然后使用帖子的ID重定向到不同的组件，如下所示：

browserHistory.push(`/posts/${response.data.postId}`);

/ posts /：postId中的组件使用另一个操作从用于访问组件的URL中的params向我的API发送获取请求以获取帖子ID。例如：

getPost(this.props.params.postId);

我使用Axios发送请求，我相信React的官方建议是在componentDidMount生命周期方法中为AJAX请求添加操作。希望这可以解决问题。

如何将新帖子链接到新网址（ReactJS + Redux）？

1 个答案: