标签：React Webpack4 cnpm react save action import redux history

<style></style>

https://segmentfault.com/a/1190000017210172#articleHeader0

 

 

 

2.解决so easy，router只有一个子元素用div包一下即可。

 

 

 

Antd 按需引入

1. cnpm install antd --save

2.cnpm i babel-plugin-import -D

babel-plugin-import   是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式

3. // .babelrc or babel-loader option

{

  "plugins": [

    ["import", {

      "libraryName": "antd",

      "libraryDirectory": "es",

      "style": "css" // `style: true` 会加载 less 文件

    }]

  ]

}

4. import { Button} from 'antd';

这时这样按需引入并不会加载进去样式

Axios请求配置

1.cnpm isntall axios --save

2.

Redux 配置

1.cnpm install --save redux react-redux redux-thunk

2.cnpm install --save-dev redux-logger

Redux:当成一个本地数据库使用，react-redux:数据订阅，redux-thunk:实现异步action，redux-logger是redux的日志中间件。

3. React-Redux 提供<Provider/>组件，能够使你的整个app访问到Redux store中的数据

 

4. action：提供一些状态函数，store数据的来源就是action，需要至少一个type，type是这个指令的唯一标识，其他元素是传送这个指令的state值，这个指令有组件触发，然后传到给reducer！

5. reducer：如果action申明了要做什么，那么具体区改变（更新）state，就是reducer做的事情了，这样理解吧，action约定了一个type，然后reducer遇到这个type，就去做一件事！

 

配置缓存系统：

6. store：真的就是数据分发的地方，store→view，他就这么一个作用，把数据给view，展示页面。主要有一下功能（摘录自网上的语录，我觉得说的最清楚的了）

　　　　1：维护整个应用的state；

　　　　2：提供getState()方法获取state；后面有了插件，也不需要这些具体的方法了

　　　　3：提供dispatch(action) 方法更新 state；

　　　　4：通过 subscribe(listener) 注册监听器。

7.页面书写

 

 

获取修改

console.log(this.props.userName,3333);

      const {saveUserName} = this.props;

      saveUserName(222);

 

错误.

 

 

 

解决react-router中this.props.history.push无法使用问题

1.v4 的组件BrowserRouter自己创建了history，不暴露出来，不让我们引用,而Router组件的history可暴露出来，供我们调用。

2.自己创建一个history

// src/history.js

import createHistory from 'history/createBrowserHistory';

export default createHistory();

3. 使用Router组件

// src/index.js

 

import { Router, Link, Route } from 'react-router-dom';

import history from './history';

 

ReactDOM.render(

  <Provider store={store}>

    <Router history={history}>

      ...

    </Router>

  </Provider>,

  document.getElementById('root'),

);

会有个提示报错

 

修改：

1. cnpm install --save history

2. 

// using ES6 modules

import { createBrowserHistory } from 'history';

 

export default createBrowserHistory();

 

 

<style></style>

配置aes加密+md5加密

1. 在index.html中引入aes.js/md5.js

 

2.直接引入会报错

 

解决：

 

 

 

标签：React,Webpack4,cnpm,react,save,action,import,redux,history
来源： https://www.cnblogs.com/miaSlady/p/10681342.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。