1.redux
要知道redux和react并没有半毛钱的关系,redux甚至可以和jq一起用。 react-redux才是react的用于便捷操作redux的第三方插件。所以呢,学习react-redux之前我们要比较熟悉的了解redux的思想。本文比较直接,不来虚的,直接上代码:
首先就很熟悉了
1 使用官方脚手架
create-react-app redux-demo
2 环境搭建好之后 继续安装redux
npm install redux --S
进入到项目文件夹 把我们用不到的全咔咔删掉
在src/index.js里引入redux并创建action reducer和store
src/index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
const oldState = {
title: 'redux使用',
type:'none'
};
const reducer = (state = oldState, action) => {
switch (action.type) {
case 'up':
state = { title: '增加数据', type: 'up' };
return state;
break;
case 'down':
state = { title: '减少数据', type: 'down' };
return state;
default:
return state;
}
}
//创建store
const store = createStore(reducer);
console.log(store.getState())
//订阅事件
store.subscribe(() =>
console.log(store.getState())
);
//派发事件
store.dispatch(increase)
ReactDOM.render(
<App />
, document.getElementById('root'));
serviceWorker.unregister();
这里大概解释下每个的意思:
action:行为 它是一个对象 里面必有type来指定其类型 这个类型可以理解为你要做什么,reducer要根据action的type来返回不同的state 每个项目有且可以有多个action
reducer: 可以理解为一个专门处理state的工厂 给他一个旧数据它会根据不同action.type返回新的数据 也就是:旧state + action = 新state 每个项目有且可以有多个reducer
store: store本质上是一个状态树,保存了所有对象的状态。任何UI组件都能直接的从store访问特定对象的状态。每个项目有且只能有一个store
脑子里有了这些基本的概念后我们就可以把reducer放到createStore里并创建好store了
可以看到 代码的最后我们打印了store.getState() 这段代码简单理解就是打印下store里的数据
2.react-redux
这些就是基本的redux的知识。我们不难发现,这样其实挺麻烦的。你需要写好多好多东西,而且我们并没有把reducer,action什么的给分离出去,不然的话我还要往很多组件里面传很多东西。这对我们实际开发是很不友好的。
所以, 这时候就十分迫切需要react-redux了。它的作用是帮助我们操作redux。有了它我们可以很方便的写redux。
安装react-redux:
`npm install react-redux --S`
组件App:
import React from 'react';
import { connect } from 'react-redux';
import './App.css';
import Left from './Left';
import Right from './Right';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
componentDidMount() {
}
handleChangeTitle() {
const { PayIncrease, PayDecrease } = this.props;
if (this.props.type == 'up') {
PayDecrease();
}else{
PayIncrease();
};
console.log('改变title', this);
}
render() {
return (
<div className="App">
<div className="App-title">
<h1 onClick={this.handleChangeTitle.bind(this)}>欢迎使用后台管理系统-{this.props.title}</h1>
</div>
<header className="App-header">
<Left />
<Right />
</header>
</div>
)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(App);
//需要渲染什么数据
function mapStateToProps(state) {
// 返回数据
return state;
}
//需要触发什么行为
function mapDispatchToProps(dispatch) {
return {
PayIncrease: () => dispatch({ type: 'up' }),
PayDecrease: () => dispatch({ type: 'down' })
}
}
reducer.js:
const oldState = {
title: 'redux使用',
type:'none'
};
const reducer = (state = oldState, action) => {
switch (action.type) {
case 'up':
state = { title: '增加数据', type: 'up' };
return state;
break;
case 'down':
state = { title: '减少数据', type: 'down' };
return state;
default:
return state;
}
}
export default reducer;
store.js:
import { createStore } from 'redux';
import reducer from './reducer';
const store = createStore(reducer);
export default store;
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './redux/store';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>
, document.getElementById('root'));
serviceWorker.unregister();
action啊 reducer啊 store啊 想必大家都已经了解过了 这里不再做过多介绍。我们主要关注下哪里有变化:
首先最明显的是demo中引入react-redux的Provider和connect,它们非常重要!这里先大概解释下它们的作用:
Provider:它是react-redux 提供的一个 React 组件,作用是把state传给它的所有子组件,也就是说 当你用Provider传入数据后 ,下面的所有子组件都可以共享数据,十分的方便。
Provider的使用方法是:把Provider组件包裹在最外层的组件,如代码所示,把整个APP组件给包裹住,然后在Provider里面把store传过去。注意:一定是在Provider中传store,不能在APP组件中传store。
connect:它是一个高阶组件 所谓高阶组件就是你给它传入一个组件,它会给你返回新的加工后的组件,注重用法倒简单,深究其原理就有点难度。这里不做connect的深究,主要是学会它的用法,毕竟想要深究必须先会使用它。首先它有四个参数([mapStateToProps], [mapDispatchToProps], [mergeProps], [options]),后面两个参数可以不写,不写的话它是有默认值的。我们主要关注下前两个参数mapStateToProps和mapDispatchToProps。
connect的使用方法是:把指定的state和指定的action与React组件连接起来,后面括号里面写UI组件名。
除此之外demo中还多出了mapStateToProps mapDispatchToProps 他们又有什么作用呢?通俗一点讲的话就是:
比如你在一个很深的UI组件里 当你想要获得store的数据就很麻烦。mapStateToProps就是告诉store你需要哪个state,需要什么数据就直接在mapStateToProps中写出来,然后store就会返回给你。同理,如果你想要dispatch派发一些行为怎么办呢,mapDispatchToProps就是告诉store你要派发什么行为,需要派发什么行为就在mapDispatchToProps中写出来,然后store就会把你想要派发的行为告诉reducer,接下来大家都应该知道了 reducer就会根据旧的state和action返回新的state。
文档结构如下:
效果图如下:
比较基础的redux和react-redux例子到这就结束了,谢谢阅览。。。