1.action-types.js
//所有actions函数的`type`字符串常量
export const STORE_UPDATE = 'STORE_UPDATE';
export const STORE_ADD = 'STORE_ADD';
export const STORE_RM = 'STORE_RM';
2.actions.js
//定义`action`创建函数生成`action`对象
import * as actionTypes from './action-types.js'
export function update(data) {
console.log(data,'data')
return {
type: actionTypes.STORE_UPDATE,
data:data
}
}
export function add(item) {
return {
type: actionTypes.STORE_ADD,
data: item
}
}
export function rm(item) {
return {
type: actionTypes.STORE_RM,
data: item
}
}
3.index.js
//生成store容器
import { createStore } from 'redux';
import Reducers from './reducers';
export default function configureStore(initialState) {
const store = createStore(Reducers,initialState,
// 触发 redux-devtools
window.devToolsExtension ? window.devToolsExtension() : undefined
);
return store;
}
4.reducer.js
//定义Redux规则
import { combineReducers } from 'redux';
import * as actionTypes from './action-types.js';
import initialState from './state.js';
const userInfo = (state = initialState, action) => {
console.log(action.data,'action')
switch (action.type) {
case actionTypes.STORE_UPDATE:
// state.userName=action.data;
// console.log(state.userName)
// return state;
// 利用拷贝进行动态渲染
return Object.assign({}, state,{userName:action.data});
case actionTypes.STORE_ADD:
state.id.unshift(action.data.id);
return state;
case actionTypes.STORE_RM:
state.id = state.id.filter(item => {
if(item !== action.data.id) {
return state.id;
}
})
return state;
default:
return state
}
}
export default combineReducers({
userInfo
})
// export default combineReducers({
// userInfo
// })
5.state.js
//Redux全局初始状态
export default {
cityName: '北京',//定位地址 默认北京
userName: 'wangming',//用户名
id:[],
// type:'STORE_UPDATE',
// data: '123'
}
6.在react中的实际应用
import React, { Component } from 'react';
import { HashRouter, Switch, Route, Redirect,withRouter } from 'react-router-dom';
import {update} from '../../redux/actions'
import { connect } from 'react-redux'
class Dlist extends React.Component {
constructor(props) {
super(props)
this.state = {isToggleOn: true,dmt:'12'};
// this.handleClick2 = this.handleClick2.bind(this);
}
handClick=()=>{
console.log('btn is click');
this.setState({
dmt: '13'
});
console.log(this.refs.myNum.value);
}
// 必须使用箭头函数才能取到this
handClick2=()=>{
console.log('接收传递的消息');
this.props.func();
console.log(this);
}
render() {
// const { getFieldProps } = this.props.form;
const { PayIncrease } = this.props
return (
<div>
<div> delist</div>
<div> {this.props.list}</div>
<div> {this.props.title}</div>
<div> {this.props.userName}</div>
<input type="text" ref="myNum" />
<div> {React.Children.map(this.props.children,function(child){
return child
})}</div>
<button onClick={this.handClick}>clik me</button>
<button onClick={this.props.func}>注册</button>
<button onClick={this.handClick2}>方法传递</button>
<button onClick={PayIncrease}>升职加薪</button>
</div>
);
}
componentDidMount(){
console.log(this)
// console.log(store);
this.props.func();
// setTimeout(()=>{
// this.props.history.push('/layout/second');
// },2000)
}
}
// const BasicInputExampleWrapper = createForm()(BasicInputExample);
// ReactDOM.render(<BasicInputExampleWrapper />, mountNode);
// class Login extends Component {
// render() {
// return (
// <BasicInputExample />
// );
// }
// }
//需要渲染什么数据
const getList = state => {
console.log(state,'state')
return {
list: state.userInfo.cityName,
userName:state.userInfo.userName
}
}
console.log(getList, 'getList')
//需要触发什么行为,必须要引用redux中actions的方法
function mapDispatchToProps(dispatch) {
// console.log(dispatch(update()),'dispatch')
return {
PayIncrease: () => {dispatch(update('libai'));console.log()},
PayDecrease: () => dispatch()
}
}
// Dlist = connect()(Dlist)
export default connect(getList,mapDispatchToProps)(Dlist);
7.index.js 在全局中的引入
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import routes from './configs/router.config'
import RouteWithSubRoutes from './configs/route-with-sub-routes'
import 'antd-mobile/dist/antd-mobile.css'; // or 'antd-mobile/dist/antd-mobile.less'
import { Provider } from 'react-redux';
import configureStore from './redux/index.js';
import {BrowserRouter as Router,Route, Switch,Redirect } from 'react-router-dom';
import {
update,
add,
rm
} from './redux/actions'
// import { Button } from 'antd-mobile';
// ReactDOM.render(<Button>Start</Button>, mountNode);
const store = configureStore();
// console.log(store.getState(),'123');
// store.dispatch(update('libai'))
console.log(store.getState(),'123')
ReactDOM.render(
// let token = 'qwe'
<Provider store={store} >
{/* <Routes /> */}
<Router>
<Switch>
{routes.map((route, i) => <RouteWithSubRoutes key={i} {...route} />)}
</Switch>
{/* <Switch>
{
routes.map((route, index) => {
// return <Route key={index} path={route.path} exact render={props =>
// (!route.auth ? (<route.component {...props} routes={route.routes}/>) : (true ? <route.component {...props} routes={route.routes} /> :
// <Redirect to={{pathname: '/',state: { from: props.location }}} />)
// )} />
return <Route key={index} path={route.path} exact render={props =>
<route.component {...props} routes={route.routes}/>} />
})
}
</Switch> */}
</Router>
</Provider>
,
document.getElementById('root')
);
serviceWorker.unregister();
其他redux的高级用法请参考https://www.redux.org.cn/docs/basics/Reducers.html