在没有 redux-persist 或 localStorage 的情况下持久化数据

Question

所以，我又一次遇到了持久化状态树的问题。在登录时，为了让用户持久存在，我从我的主 App.js 中分派了一个操作，并获得了当前登录的用户，如下所示：

App.js

componentDidMount() {
    const authToken = localStorage.getItem("authToken")

    if (authToken) {
        this.props.dispatch({ type: "TOKEN_VERIFICATION_STARTS" })
        this.props.dispatch(getCurrentUser(authToken))
    }
}

现在，我有一个表单，当它被提交时，我会将用户重定向到提要，在那里我将以卡片形式显示帖子标题和描述。但像往常一样，postData 在刷新后消失了。

这意味着我是否必须创建另一个路由，类似于我为获取当前登录用户而创建的 /me 路由？并再次从 App.js 中的 componentDidMount() 派发一个动作？

NewPostForm.js

import React, { Component } from "react"
import { connect } from "react-redux"
import { addpost } from "../actions/userActions"

class NewpostForm extends Component {

    constructor(props) {
        super(props)
        this.state = {
            postTitle: "",
            postDescription: "",
            maxLength: 140
        }
    }

    handleChange = (event) => {
        const { name, value } = event.target
        this.setState({
            [name]: value
        })
    }

    handleSubmit = () => {
        const postData = this.state
        this.props.dispatch(addpost(postData, () => {
            this.props.history.push("/feed")
        })
      )
    }

    render() {
        const charactersRemaining = (this.state.maxLength - this.state.postDescription.length)
        return (
            <div>
                <input
                    onChange={this.handleChange}
                    name="postTitle"
                    value={this.state.postTitle}
                    className="input"
                    placeholder="Title"
                    maxLength="100"
                />

                <textarea
                    onChange={this.handleChange}
                    name="postDescription"
                    value={this.state.postDescription}
                    className="textarea"
                    maxLength="140">
                </textarea>
                <button onClick={this.handleSubmit}>Submit</button>

                <div>
                    Characters remaining: {charactersRemaining}
                </div>

            </div>
        )
    }
}

const mapStateToProps = (store) => {
    return store
}


export default connect(mapStateToProps)(NewpostForm)

addPost 操作

export const addpost = (postData, redirect) => {
    console.log("inside addpost action")
    return async dispatch => {
        dispatch({
            type: "ADD_post_STARTS"
        })
        try {
            const res = await axios.post("http://localhost:3000/api/v1/posts/new", postData, {
                headers: {
                    "Content-Type": "application/json",
                    "Authorization": `${localStorage.authToken}`
                }
            })
            dispatch({
                type: "ADD_post_SUCCESS",
                data: { post: res.data.post },
            })
            redirect()
        } catch (err) {
            dispatch({
                type: "ADD_post_ERROR",
                data: { error: "Something went wrong" }
            })
        }

    }
}

Feed.js

import React from "react";
import { connect } from "react-redux";

const Feed = (props) => {
  // const postTitle = (props.post && props.post.post.post.postTitle)
  return (
    <div className="card">
      <header className="card-header">
        <p className="card-header-title">
          {/* {postTitle} */}
        </p>
      </header>
      <div className="card-content">
        <div className="content">
          The text of the post written by the user.
        </div>
      </div>
      <footer className="card-footer">
        <a href="#" className="card-footer-item">
          Edit
        </a>
        <a href="#" className="card-footer-item">
          Delete
        </a>
      </footer>
    </div>
  );
};

const mapStateToProps = state => {
  return state;
};

export default connect(mapStateToProps)(Feed);

Answer 1

我知道你想要没有 redux-persist 但 redux 正常行为会强制从头开始重新初始化存储。如果你想保持你的状态甚至刷新你的页面，我会推荐以下包：

https://github.com/rt2zz/redux-persist

如果您在页面重定向上丢失状态或使用 react-router 前往不同的路线，您将需要使用：

https://github.com/reactjs/react-router-redux

Answer 2

如果我理解正确，您似乎在您的提要页面中使用/api/v1/posts/new 的响应，但尝试访问 NewPostForm.js

的本地状态

this.state = {
   postTitle: "",
   postDescription: "",
   maxLength: 140
}

您可能需要将数据保存到 redux 存储，以便可以在不同的路由之间共享，而不是使用本地状态来保存无法共享到另一个组件的表单数据（除非作为 props 传递，这不是这里的情况） /p>

 handleChange = (event) => {
   const { dispatch } = this.props;
   const { name, value } = event.target;
   dispatch(setPostData(name, value));
 }

您的操作可能如下所示：-

export const setPostData = (name, value) => ({
     type: "SET_POST_DATA",
     name,
     value,
});

之后，您可以在 Feed 页面上使用 this.props.postTitle

编辑：为了在页面重新加载（完全浏览器重新加载）之间保持状态，您可能需要获取挂载上的所有数据（高阶组件很有帮助）或使用本地存储。