index.js代码
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware, compose } from 'redux'
import thunk from 'redux-thunk'
import Test from './component/Test'
import {Test2} from './component/Test'
import { counter,addNum,removeNum,addNumAsyns } from './component/index.redux'
const reduxDevtools = window.devToolsExtension?window.devToolsExtension():()=>{}
//import './index.css';
//import * as serviceWorker from './serviceWorker';
const store = createStore(counter, compose(
applyMiddleware(thunk),
reduxDevtools
))
function render(){
//把App标签渲染到html的id为root下面
ReactDOM.render(
<div className="App">
<Test store={store} addNum={addNum} removeNum={removeNum} addNumAsyns={addNumAsyns} name='yyt'></Test>
<Test2 store={store}></Test2>
</div>, document.getElementById('root'));
}
render()
store.subscribe(()=>{
render()
console.log(store.getState)
})
//serviceWorker.unregister();
Test.js代码 内部含有Test , Test2两个模块
import React from "react"
import {Button, List } from 'antd'
import theme from '../json/theme.json'
class Test2 extends React.Component{
render(){
let store = this.props.store
const num = store.getState()
return <h1>{num}</h1>
}
}
class Test extends React.Component{
constructor(props){
super(props);
this.state = {
solders:[]
}
};
componentWillMount(){
console.log('组件将要加载...')
}
componentDidMount(){
console.log('组件加载完毕...'+this.props.name)
}
shouldComponentUpdate(){
return true;
}
addPerson = () => {
//console.log(this.props.store)
//console.log(this.props.store.getState())
let arr = [...this.state.solders,'新人'+Math.random()];
this.setState({
solders:arr
})
console.log("进入了addPerson函数, 且dispatch参数为 : "+ JSON.stringify({...this.props.addNum(),length:arr.length}))
this.props.store.dispatch({...this.props.addNum(),length:arr.length})
}
addNumAsyns = () => {
let arr = [...this.state.solders,'新人'+Math.random()];
this.setState({
solders:arr
})
this.props.addNumAsyns({length:arr.length})
}
removePreson = () => {
this.state.solders.pop();
console.log("进入了removePreson函数, 且dispatch参数为 : "+ JSON.stringify({...this.props.removeNum(),length:this.state.solders.length}))
this.props.store.dispatch({...this.props.removeNum(),length:this.state.solders.length})
}
render(){
console.log('组件正在加载...')
return(
<div>
<div>这是一个测试,{this.props.name}</div>
<Button onClick={this.addPerson} type="primary">新增</Button>
<Button onClick={this.removePreson} type="primary">删除</Button>
<Button onClick={this.addNumAsyns} type="primary">延迟新增</Button>
<List bordered size='small'>
{this.state.solders.map(v=>{
return (
<List.Item key={v}><span style={{color:theme.bright.fontColor}}>{v}</span></List.Item>
)
})}
</List>
</div>
)
}
}
export default Test;
export {Test2}
index.redux.js
const ADD_NUM = '加一'
const REMOVE_NUM = '减一'
//reducer
export function counter(state=0, action){
switch(action.type){
case ADD_NUM:
return action.length
case REMOVE_NUM:
return action.length
default:
return 0
}
}
//创建action
export function addNum(){
return {type:ADD_NUM}
}
//创建action
export function removeNum(){
return {type:REMOVE_NUM}
}
export function addNumAsyns(state=10){
console.log("进入了addNumAsyns")
console.log("addNumAsyns里dispatch参数为 : "+ JSON.stringify({...addNum(),length:state}))
// return dispatch=>{
// console.log("lllkdafjhvfshdjss")
// setTimeout(()=>{
// console.log("jjjjjjj");
// return dispatch({...addNum(),length:state.length})
// },200);
// }
return (dispatch, getState)=>{
console.log("dsgterfv")
setTimeout(()=>{
console.log("进入延迟器")
dispatch({...addNum(),length:state})
},2000)
}
}
问题是点击新增和删除按钮都是可以成功的把数组的长度赋值给store的,但是点击延迟新增按钮 虽然它成功的跑进了addNumAsyns 但是并没有执行
return
的函数