TASK-OA项目reduxt实现

TASK项目
1.搭建项目
2.ANTD
3.数据处理
4.redux

create-react-app 脚手架
$ npm i create-react-app -g
$ create-react-app xxx
或者
$ npx create-react-app xxx 【yarn】

向配置less
1.-->$ git init -y (在一个大仓库就直接提交到历史区)
   (如果项目不在一个仓库或者本身也不是一个仓库，则需要把项目初始化成一个git仓库,代码提交到历史区 )
   $ git add .
   $ git commit -m'eject'
2.-->$ yarn eject
   $ npm run eject
   (暴露配置文件)
3.$ yarn add less less-loader

4.config/webpack.config.js 配置less
// style files regexes
const cssRegex = /\.(css|less)$/;
const cssModuleRegex = /\.module\.(css|less)$/;

两处 use: getStyleLoaders({...},'less-loader')
5.安装所使用模块
antd moment axios qs react-router-dom
redux
react-redux
redux-logger
redux-thunk
redux-promise

6.package.json 跨域代理
"proxy": "http://127.0.0.1:9999"
7. $ npm run start 启动项目服务

9.页面布局
table 唯一的id设置
---》rowKey="id"
---》每条数据加唯一的key

/* 指定了dataIndex，则text是具体的一个值，
不指定dataIndex，则跟record一样都是这行的数据 */

表格里每行每列的取值
columns render(text,record)
text 当前列的值
record当前行的值

模态框

输入框
onChange={ev => {
let value = ev.target.value.trim();
this.setState({ taskText: value });
}}
页卡切换

10：数据请求的准备
axions二次封装

11：基于redux构建store相关文件

store -|index.js //创建一个Store，应用中间件applyMiddleware用来发送异步请求
   |action-types.js 派发的行为标识

   |reducers-|index.js(task.js)合并每个板块的reducer
               |task.js TASK项目的管控的任务板块(状态方法)
   |actions -|index.js(task.js)合并每个板块的action行为的
   |task.js(action-types.js)TASK板块派发的action行为，里面都有方法，方法返回对应的对象
view -|Task.jsx (action)
index.js 主入口导入store 并且把store注入到根组件上
/* store */
import store from './store/index';
import { Provider } from 'react-redux';
ReactDOM.render(<ConfigProvider locale={zhCN}>
<Provider store={store}>
<App />
</Provider>
</ConfigProvider>,
document.getElementById('root')
);

react-redux 一共提供两个组件
Provider 通过他可以把store注册到上下文里面
connect 通过他就可以公共状态的属性和操作通过属性传给当前组件
export default store= createStore(reducer, applyMiddleware(
reduxLogger,
reduxThunk,
reduxPromise
));
reducers用来存储公共数据，和改变公共数据
actions 用来存放方法，这些方法都是返回一个action对象

connect 用来将reducers和actions中的数据和方法全都以属性的方式传递给对应的组件
组件调用使用this.props.对应的方法名即可，也可以带参数传递给actions里面的方法
actions里的方法受到参数即可传给对应的actions.payload，然后派发到reducers中改变数据

请求拦截器手写方法
axios.defaults.transformRequest = function (data) {
   if (!data) return data;
   let result = ``;
   for (let attr in data) {
       if (!data.hasOwnProperty(attr)) break;
       result += `&${attr}=${data[attr]}`;
   }
   return result.substring(1);
};
使用qs
axios.defaults.transformRequest = data => qs.stringify(data);

reducers

// state : store容器中的状态（state.xxx=xxx直接就修改了，我们想return的时候再修改，所以我们需要在最开始把state克隆一份【深拷贝】）
// action : dispatch派发的行为对象（需要有成员type）

/* export default connect(state => {
   // state:公共状态 {computed:{},task:{}...}
   return {
       ...state.computed
   };
})(Test);
*/
/*
* connect高阶组件：返回一个代理组件
* connect([mapStateToProps],[mapDispatchToProps])([组件])
* =>不需要的可以写null/或者不传递
* =>mapStateToProps：把store容器中的公共状态进行遍历，把遍历后的结果(公共状态)当做属性传递给对应的组件
* =>mapDispatchToProps：把需要派发的行为任务进行遍历，最后也是基于属性传递给对应的组件
*
* 默认帮我们基于subscribe向redux事假池中加入一个方法，当状态更新，会默认通知这个方法执行，并且让当前组件重新渲染
*/

TASK-OA项目reduxt实现

相关推荐