带有钩子的React-cookies

Question

我正在使用React-cookies、redux、redux-thunk和hooks。

我不明白如何将 "token "的值存储为cookie。

这是组件 App.js

<Provider store={store}>
    <CookiesProvider>
      <BrowserRouter>
        <Switch>
          <Route exact path="/release/:id" component={Release} render={() => (<Login cookies={this.props.cookies} />)} />
          <Route exact path="/login" render={() => (<Login cookies={this.props.cookies} />)} component={Login} />
        </Switch>
      </BrowserRouter>
    </CookiesProvider>
  </Provider>

实际上 Login 组件被制作成钩子

因为这个组件的调用，我收到了token的值。

function Form({ handleSubmit, login }, props) {
  const [token, setToken] = useState(undefined);
  const onSubmit = (user) => {
    login(user);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className={styles.flexColumn}>

      <div className={styles.username}>
        <P>username</P>
        <Field name="username" component="input" type="text" className={styles.input} />
      </div>

      <div className={styles.password}>
        <P>password</P>
        <Field
          name="password"
          component="input"
          type="text"
          className={styles.input}
        />
      </div>

      <div className={styles.downSection}>
        <Flex>
          <div>
            <P>
                Serve Aiuto?
            </P>
          </div>
          <a href="#">
            <div className={styles.contactLink}>
              <P>Contattaci</P>
            </div>
          </a>
        </Flex>
        <Button type="submit" text="Accedi" />
      </div>
    </form>
  );
}

Form.propTypes = {
  handleSubmit: PropTypes.func.isRequired,
  login: PropTypes.func.isRequired,
};

const mapStateToProps = (state, ownProps) => ({
  cookies: ownProps.cookies,
}, console.log(ownProps));

const mapDispatchToProps = {
  login: loginAction,
};

const enhance = compose(
  connect(mapStateToProps, mapDispatchToProps),
  reduxForm({ form: 'login' }),
);

export default enhance(Form);

我怎样才能存储价值 token 作为一个cookie？ 我得到这个值感谢 loginAction我必须使用库中的react-cookies。

谢谢，我正在使用React-cookies、redux、redux-thunk和hooks。

Answer 1

使用一个库...如 react-cookie.

你可以简单地做。

import {useCookie} from 'react-cookie'

并使用cookies。

看一看 此处