redux-token-auth 项目教程
1. 项目的目录结构及介绍
redux-token-auth/
├── src/
│ ├── actions/
│ ├── reducers/
│ ├── components/
│ ├── config/
│ ├── index.js
├── package.json
├── README.md
src/
:项目的源代码目录。actions/
:包含所有 Redux 动作的文件。reducers/
:包含所有 Redux 减速器的文件。components/
:包含所有 React 组件的文件。config/
:包含项目配置文件的目录。index.js
:项目的入口文件。
package.json
:项目的依赖和脚本配置文件。README.md
:项目的说明文档。
2. 项目的启动文件介绍
index.js
是项目的入口文件,负责初始化 Redux 存储、配置 Redux 中间件,并渲染根组件。以下是 index.js
的基本结构:
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
import App from './components/App';
const store = createStore(rootReducer, applyMiddleware(thunk));
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
3. 项目的配置文件介绍
config/redux-token-auth-config.js
是项目的配置文件,用于配置与后端通信的参数和用户属性映射。以下是配置文件的基本结构:
import { generateAuthActions } from 'redux-token-auth';
const config = {
userAttributes: {
firstName: 'first_name',
lastName: 'last_name',
imageUrl: 'image',
},
userRegistrationAttributes: {
firstName: 'first_name',
lastName: 'last_name',
},
endpoints: {
REGISTER_URL: '/auth',
SIGN_IN_URL: '/auth/sign_in',
SIGN_OUT_URL: '/auth/sign_out',
VERIFY_TOKEN_URL: '/auth/validate_token',
},
};
const { registerUser, signInUser, signOutUser, verifyToken } = generateAuthActions(config);
export { registerUser, signInUser, signOutUser, verifyToken };
这个配置文件定义了用户属性的前后端映射关系,以及与后端通信的端点 URL。通过 generateAuthActions
函数生成相应的 Redux 动作。