React redux -- Cookie、redux-persist持久化数据存储、Ant Design 表单Form常用方法

Cookie

js-cookie

js-cookie 介绍

js-cookie 是一个简单的，轻量级的处理 cookie 的js API ，用来处理 cookie 相关的插件

js-cookie 的使用

安装

npm i --save js-cookie

引入

import Cookie from 'js-cookie'

js-cookie 的保存、获取和删除

import Cookie from 'js-cookie'
const KEY = 'USER-COOKIE-KEY'

//  保存 COOKIE
export const saveUserCookie = (user) => {
    Cookie.set(KEY,user,{expires:7})
}
// 获取 COOKIE
export const getUserCookie = () => {
    return Cookie.get(KEY)
}
// 删除 COOKIE
export const removeUserCookie = () => {
    Cookie.remove(KEY)
}

react-cookie

react-cookie 的使用

与 js-cookie 一样，使用方法略有不同

安装

npm i react-cookies --save

引入

import Cookie from 'react-cookies

react-cookie 的保存、获取和删除

import Cookie from 'react-cookies
const KEY = 'USER-COOKIE-KEY'

//  保存 COOKIE
export const saveUserCookie = (user) => {
    Cookie.save(KEY,user,{expires:7})
}
// 获取 COOKIE
export const loadUserCookie = () => {
    return Cookie.load(KEY)
}
// 删除 COOKIE
export const removeUserCookie = () => {
    Cookie.remove(KEY)
}

redux-persist 持久化数据存储

在 React 项目中，我们通常会通过 redux 以及 react-persist 来存储和管理全局数据。

redux 和 react-persist 存储
redux 存储数据时，如果用户刷新页面，存储的数据会被全部清空，因此，我们会有持久化存储数据的需求，首先我们想到的就是 localStorage，localStorage 是没有时间限制的数据存储，我们可以通过它来实现数据的持久化存储。在使用 redux 的基础上，使用 localStorage 来存储数据不仅工作量大，还容易出错，因此出现了结合redux来达到持久数据存储功能的框架 react-persist

redux 特点

• 集中式存储管理应用的所有组件状态
• 保证状态以一种可预测的方式发生变化
• 简化 Redux 组件间通讯

react-persist 会将redux的store中的数据缓存到浏览器的localStorage中。

redux-persist 的使用

index.js

import { createStore,combineReducers,applyMiddleware } from 'redux';
import thunk from 'redux-thunk'; //异步操作库 -- 中间件
import { reducerUser } from './reducer/reducerUser';

//持久存储
import {persistStore, persistReducer} from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';
 
// 存储配置
const persistConfig = {
    key: 'root',
    storage: storage,
    stateReconciler: autoMergeLevel2 // 查看 'Merge Process' 部分的具体情况
};

 // 合并多个reducer,更新原state状太数据，返回一个新状态
 const reducer = combineReducers({reducerUser})

const myPersistReducer = persistReducer(persistConfig, reducer)
 
export const store = createStore(myPersistReducer,applyMiddleware(thunk))
 
export const persistor = persistStore(store)

reducerUser.js

import { ADD_USER } from "../actionType";
const userState = {
    user:null
}
// 根据原 state 计算得到新的 state返回
export const reducerUser = (state = userState,action) => {
    switch (action.type){
        case ADD_USER:
            return {user:action.user}
        default:
            return state
    }
}

Ant Design 表单Form常用方法

Form.useForm()

通过 Form.useForm 对表单数据域进行交互

const [form] = Form.useForm()

经 Form.useForm() 创建的 form 控制实例

① form.setFieldsValue()

设置表单值，更新对应的值

form.setFieldsValue({
	username:'root',
	nick:'游客'
})

② form.getFieldsValue()

获取一组字段名对应值，按照对应结构返回

const value = form.getFieldsValue()
// {username:'root',nick:'游客'}

③ form.getFieldValue()

获取对应字段名的值

const username = form.getFieldValue('username')  //root
const nick = form.getFieldValue('nick') // 游客

④ form.validateFields()

触发表单验证

form.validateFields().then(value => {
	//验证通过
	const {username,nick} = value
}).catch(err => {
	//验证不通过
	console.log(err)
})

⑤ form.submit()

提交表单，与点击 submit 按钮效果相同，会走 onFinish 方法

<Button type="primary" htmlType="submit" className="login-form-button">
	Log in
</Button>
// 两者效果相同
<Button onClick = {() => form.submit()}>
	Log in
<Button>

⑥ form.resetFields()

重置一组字段到 initialValues
对整个表单进行重置，将所有字段值重置为初始值并移除校验结果

form.resetFields()