在开始之前,需要安装环境,node.js可以使用npm管理包,开发的工具webstorm可以创建相应的项目。
项目中redux是管理全局的同一个store,React-router是管理路由的,这里只使用了redux,react-router稍后介绍。
1、先创建一个简单的项目。安装对应的包redux、react-redux、redux-thunk(异步操作action时使用)
2、建立全局使用State,也就是store。
import {combineReducers} from 'redux'; //combineReducers作用可以将多个reducer合并成一个,const counterReducer = (state = {value: 0}, action) => {
//根据dispatch触发的action类型来修改对应state
switch (action.type) {
case 'add':
state = {value: state.value + 1}
break;
case 'delete':
state = {value: state.value - 1}
break;
default:
break;
}
return state;
}export default combineReducers({
counterReducer //这里是添加一个state值,也可以修改成 counter: counterReducer,这样在state中的key为counter来获取值
})
3、创建store
import {createStore, applyMiddleware} from 'redux';
import {createLogger} from 'redux-logger'; //日志有关
import thunk from 'redux-thunk'; //这个必须要引入到中间件中import Init from './InitReduxCollection'; //这个是上面创建的reducer
const middleware = [thunk]; //与异步操作有关,必须要引入,不然报错const store = createStore(Init, applyMiddleware(...middleware)); //applyMiddleware中间件,可以放入多个参数,日志中间件要放在最后
export default store
4、页面关联action和reducer
/**
* Created by Administrator on 2019/1/2.
*/import React, {Component} from 'react';
import {connect} from 'react-redux'; //这里要注意
import PropTypes from 'prop-types' import './home-page.css';class HomePage extends Component { static propTypes = {
value: PropTypes.number
}; addClick = () => {
console.log('add....')
let {Add} = this.props;
Add(); }
deleteClick = () => {
console.log('delete....')
this.props.Delete()
} render () {
console.log(this.props) return <div className="home">
<div>hello world !!!! </div> <div className="button" onClick={this.deleteClick}>-</div> {this.props.value} <div className="button" onClick={this.addClick}>+</div> </div>
}
}//这里是所有action的方法
const mapDispatchToProps = {
//这里先不着急创建action,先把页面和state关联,然后创建action,在将对应的action放入就可以了,可以看到第七步创建action
//Add,
//Delete
}
//这里是将所有reducer的state转成关联页面的props,可以通过props来访问
const mapStateToProps = (state) => {
console.log(state) //这里打印会看到reducer合并的所有state
return {
...state.counterReducer
}
}//将页面和全局的store关联
export default connect(mapStateToProps, mapDispatchToProps)(HomePage);
5、创建页面和store关联
import React , {Component} from 'react';
import {Provider} from 'react-redux'; //用于页面和全局store关联
import store from './page/Store'; //这个是上面第三步创建store
import HomePage from './page/Home/HomePage'; //对应的页面export default class AppContainer extends Component { render () {
return <Provider store={store}>
<HomePage/>
</Provider>
}
}
6、修改显示页面,然后运行看看效果页面是否可以展示,此时action是不能触发,
ReactDOM.render(<AppContainer />, document.getElementById('root'));
7、创建action,然后可以将其关联到第四部中。
export const Add = (param) => (dispatch, getState) => {
//这里参数dispatch是页面关联时,调用传入的参数,param是调用Add时传入的参数,dispatch调用时传入参数中type是必须的,其他的可以自己定义参数名,比如dispatch({type:'add', value:2}),这个dispatch触发add的reducer,action就是这里传入的参数
dispatch({
type: 'add'
});
}export const Delete = () => (dispatch, getState) => {
dispatch({
type: 'delete'
});
}