今天趁着周六日的时间，自己写一些小的react实例练练避免生疏，今天主要练习一下react中经常使用的状态管理redux和react自己封装的react-redux的使用。
redux是一个独立的框架，并不只是服务于react，所以他在react中的用法并不是很友好，而且与vuex不同的是它本身并不支持异步的操作，在vuex我们可以在action中进行异步的操作。首先我们来使用最原始的redux创建一个实例，然后再用react-redux进行改造。
通过create-react-app创建一个项目，在src下面创建一个reduxdemo.js文件和一个store文件夹，在store文件夹下面创建index.js文件。
安装
npm install redux react-redux -S 或
cnpm install redux react-redux -S 或
yarn add redux react-redux
src/store/index.js
我们写一个登录状态改变的小demo
import { createStore } from "redux"
function loginReducer(state="登录", action){//创建reducer并赋予state默认值
switch(action.type){
case "nologin":
return "登录"
case "nowlogin":
return "登录中...."
case "haslogin":
return "已登录"
case "logout" :
return "退出登录"
default :
return state
}
}
const store = createStore(loginReducer)//创建store
export default store;
src/reduxdemo.js
//在这我使用class组件方便一会使用装饰器改造
import React from "react"
import store from "./store"//引入store
class Reduxdemo extends React.Component{
render(){
return (
<div>
<p>{store.getState()}</p>//获取store中的state
<button onClick={()=>store.dispatch({type: "nowlogin"})}>去登陆=>登录中</button><br/><br/>
<button onClick={()=>store.dispatch({type: "haslogin"})}>登录中=>登陆成功</button><br/><br/>
<button onClick={()=>store.dispatch({type: "logout"})}>退出</button>
</div>
)
}
}
export default Reduxdemo
在src/app.js中引入reduxdemo.js
//删除了原来app中不需要的内容
import React from 'react';
import Reduxdemo from './reduxdemo';
function App() {
return (
<div className="App">
<Reduxdemo></Reduxdemo>
</div>
);
}
export default App;
接着改造一下src/index.js，通过store.subscribe()方法订阅监听store中数据的变化，让组件重新渲染
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import store from "./store"
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
store.subscribe(()=> ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
))
serviceWorker.unregister();
这样redux的整个流程就走完了，启动项目
1.gif
我们发现他需要破坏react项目原有的结构，所以react推出了react-redux，下面我们来改造demo
store文件夹内容保持不变
我们首先删除src/index.js中订阅的方法。
src/app.js
import React from 'react';
import Reduxdemo from './reduxdemo';
import store from "./store"
import { Provider } from "react-redux"//引入Provider,是一个顶级组件，隔代传值
function App() {
return (
<div className="App">
<Provider store={store}>//将store传下去
<Reduxdemo></Reduxdemo>
</Provider>
</div>
);
}
export default App;
src/reduxdemo.js
import React from "react"
import { connect } from "react-redux"//connect 一个高阶组件
const mapStateToProps = state => ({status: state});
const mapDispatchToProps = {
nowlogin: () => ({type: "nowlogin"}),
haslogin: () => ({type: "haslogin"}),
logout: () => ({type: "logout"}),
}
class Reduxdemo extends React.Component{
render(){
const { status, nowlogin, haslogin, logout } = this.props;
return (
<div>
<p>用react-redux改造后</p>
<p>{status}</p>
<button onClick={nowlogin}>去登陆=>登录中</button><br/><br/>
<button onClick={haslogin}>登录中=>登陆成功</button><br/><br/>
<button onClick={logout}>退出</button>
</div>
)
}
}
//两个参数传入顺序不要写反了先state后dispatch
export default connect(mapStateToProps, mapDispatchToProps)(Reduxdemo);
启动项目
2.gif
接下来我们来看看装饰器的写法，之前在高阶组件那篇文章中使用过装饰器不过那是基于next.js项目的，create-react-app使用有些不同
同样安装依赖@babel/plugin-proposal-decorators
然后执行命令：
npm run eject
到package.json中做修改
找到babel
"babel": {
"presets": [
"react-app"
],
//添加下面这段
"plugins": [
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
]
]
},
然后修改src/reduxdemo.js
import React from "react"
import { connect } from "react-redux"
const mapStateToProps = state => ({status: state});
const mapDispatchToProps = {
nowlogin: () => ({type: "nowlogin"}),
haslogin: () => ({type: "haslogin"}),
logout: () => ({type: "logout"}),
}
//装饰器调用
@connect(mapStateToProps, mapDispatchToProps)
class Reduxdemo extends React.Component{
render(){
const { status, nowlogin, haslogin, logout } = this.props;
return (
<div>
<p>用react-redux改造后</p>
<p>{status}</p>
<button onClick={nowlogin}>去登陆=>登录中</button><br/><br/>
<button onClick={haslogin}>登录中=>登陆成功</button><br/><br/>
<button onClick={logout}>退出</button>
</div>
)
}
}
export default Reduxdemo
