反応アプリでクッキーを使用して永続的なデータ

反応アプリでデータを持続しようとするとき、一般的に2つの方法があります:LocalStorageまたはクッキー.LocalStorage対クッキーに関する多くの情報と議論を見つけます.一般的に、localstorageを使うべきであると結論している記事が表示されます.それはこのポストではない.
このポストは、クッキーを使用して、反応クッキーを通してあなたを歩きます.

なぜクッキー
最初は現在のプロジェクト(ソーシャルメディアマーケティングアシスタント)を構築するとき、私はすでに反応アプリでLocalStorageを使用しているので、ログインを持続するためにクッキーを使用することを決め、私は何か新しいことを学びたいと思った!
いくつかの更なる研究の後、私はブラウザーリフレッシュとセッションの間でさえ耐えることができたので、それが行く方法であると決めました.私もクッキーを有効期限を与えることができました.また、MDNは私にこう言った.

Cookies are mainly used for three purposes:

Session management
Logins, shopping carts, game scores, or anything else the server should remember

私に十分良い!

ステップ1 :反応クッキーをインストールする
アプリケーションで、反応クッキーパッケージをインストールします.

npm install react-cookie

Step 2 : CookesesProviderでラップする
トップレベルのコンポーネントをCookiesProviderコンポーネントにラップするつもりです.

import React from 'react'
import ReactDOM, {render} from 'react-dom'
import App from '../components/App'



document.addEventListener("DOMContentLoaded", () => {
  render(
    <CookiesProvider>
        <App />
    </CookiesProvider>,
    document.body.appendChild(document.createElement("div"))
  );
});

あなたが既にプロバイダコンポーネントでラップされるならば、反応Reduxの礼儀は、ちょうどそれのようにそれを加えます:

import React from 'react'
import ReactDOM, {render} from 'react-dom'
import PropTypes from 'prop-types'
import App from '../components/App'
import { createStore, applyMiddleware, compose } from 'redux'
import { Provider } from 'react-redux';
import thunk from 'redux-thunk'
import rootReducer from '../reducers/rootReducer'
import { CookiesProvider } from 'react-cookie';


const store = createStore(rootReducer, compose(applyMiddleware(thunk)))
document.addEventListener("DOMContentLoaded", () => {
  render(
    <CookiesProvider>
      <Provider store={store}>
        <App />
      </Provider>
    </CookiesProvider>,
    document.body.appendChild(document.createElement("div"))
  );
});

setcookie
クッキーは、クッキーを設定、取得、削除するために使用できるいくつかの便利なダンディフックがあります.あなたがどのフックを使用しても、あなたがUseCookiesをインポートして、クッキーとあなたのフックを定義するのを確実にしてください.
たとえば、現在のユーザーストア変数に基づいてユーザクッキーを設定したい場合は、次のようにします.

import React, {useEffect} from "react";
import { BrowserRouter as Router, Route, Switch, Redirect } from "react-router-dom";
import Login from '../components/Login'
import Home from '../components/Home'
import Signup from '../components/Signup'
import {useSelector, useDispatch} from 'react-redux'
import { useCookies } from 'react-cookie';
import {getCurrentUser } from "../actions/userActions";


function Routes() {
  const loggedInUser = useSelector(state => state.currentUser)
  const [cookies, setCookie] = useCookies(['user']);
  const dispatch = useDispatch()
  useEffect(() => {
    if(loggedInUser && cookies["user"] == "undefined") {
      console.log(loggedInUser.id.to_s)
      setCookie('user', loggedInUser.id, {path: '/'})
    } else if (!loggedInUser && cookies["user"] != "undefined"){
      dispatch(getCurrentUser(cookies["user"]))

    }
  })

    return (
      <>
      <Router>
        <Switch>
          <Route path="/" exact component={Home}/>
          <Route exact path='/login' >
            {loggedInUser ? <Redirect to="/" /> : <Login />}
          </Route>
          <Route exact path='/signup' >
            {loggedInUser ? <Redirect to="/" /> : <Signup  />}
          </Route>

        </Switch>
      </Router>
      </>
    )
}


export default Routes

輸入に注意してください
変数宣言: import { useCookies } from 'react-cookie';ここでは、変数をcookie ' user 'に接続します.
クッキーの設定に注意してください.
このコード行は、クッキーユーザーにloggedinuserの値を設定します.ID、およびそれはアプリ全体で利用可能にする.
クッキーを削除するには、似たようなことができます.

import React from 'react'
import {Link} from 'react-router-dom'
import {useSelector, useDispatch} from 'react-redux'
import {logOut} from '../actions/userActions'
import { useCookies } from 'react-cookie'
import { useHistory } from 'react-router-dom'

function App(){
    const loggedInUser = useSelector(state => state.currentUser)
    const dispatch = useDispatch()
    const history = useHistory()
    const [cookies, removeCookie] = useCookies(['user'])
    const token = document.querySelector('meta[name="csrf-token"]').content;
    const logout = (e) => {
        e.preventDefault()
        removeCookie('user')
        dispatch(logOut(token))
    }
    return(
        <div className="main">
            <h1>Home</h1>
            <ul>
            {!loggedInUser ? <><li><Link to="/login">Login</Link> or </li> <Link to="/signup">Signup</Link> </> :  <><li><form id="logout-form" onSubmit={logout}><input type="submit" value="Log Out"  /></form></li></>}



            </ul>
        </div>
    )
}

export default App

それは本当に始めるのは簡単です!