Сохраняющиеся данные без Redx-Persist или LocalStorage

Question

Итак, еще раз, я столкнулся с проблемой сохранения дерева состояний. При входе в систему для сохранения пользователя я отправил действие из основного приложения. js и получил текущего зарегистрированного пользователя следующим образом:

Приложение. js

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

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

Теперь у меня есть форма, и когда она отправляется, я перенаправляю пользователя на фид, где я показываю заголовок сообщения, описание в карточной форме. Но, как обычно, postData исчезает после refre sh.

. Это означает, что мне нужно сделать другой маршрут, аналогичный маршруту / me, который я сделал для получения текущего зарегистрированного пользователя? И снова отправьте действие из componentDidMount () в приложении. js?

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, но при нормальном поведении приведения к редуксу, инициализировали хранилище заново с нуля. Если вы хотите сохранить свое состояние, даже обновив sh свою страницу, я бы порекомендовал следующий пакет:

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

Если вы теряете свое состояние на перенаправление страницы или путешествие по другому маршруту с использованием реакции-маршрутизатора, который вы хотите использовать:

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

Answer 2

Если я правильно понимаю, похоже, что вы используете ответ /api/v1/posts/new на своей странице канала, но пытаетесь получить доступ к локальному состоянию NewPostForm. js

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

Вместо этого использования локального состояния для сохранения данных формы, которые не могут быть переданы другому компоненту (если только они не передаются в качестве реквизитов, что здесь не так), вам может потребоваться сохранить данные в хранилище с избыточностью, чтобы их можно было совместно использовать по другому маршруту

 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,
});

После этого вы можете использовать this.props.postTitle на странице канала

Редактировать: для того, чтобы Сохраняйте состояние между перезагрузкой страницы (полная перезагрузка браузера), вам может потребоваться либо извлечь все данные при монтировании (полезны компоненты более высокого порядка), либо использовать локальное хранилище.