我电脑有问题,或者是有一些别的问题,程序在我电脑上有错误。
react-redux可以成功安装,但是引用Provider标签就报错。
import React, { Component } from 'react';
import { Provider } from "react-redux";
import store from '../ListStore'
import Direct from "../components/Direct";
import MyVideo from '../components/MyVideo';
//redux入门的一个组件
import ToDoList from '../components/ToDoList';
//redux进阶(redux-thunk,redux-saga)的一个组件,和上一个组件内容一样,所以保留一个就好
import ToDoListUp from '../components/ToDoListUp';
//redux最终版本->react-redux:新建一个ListStore文件夹
import ToDoListLast from '../components/ToDoListLast';
class Onlinetest extends Component {
render() {
return (
<div>
{/** 面包屑 */}
<Direct>
<span>西安电影</span>
</Direct>
{/** 内容 */}
<Provider store={store}>
<ToDoListLast />
</Provider>
</div>
);
}
}
export default Onlinetest;
const defaultState = {
inputValue:'hello',
list:[]
};
export default (state = defaultState, action) => {
if (action.type === "change_input_value"){
const newState = JSON.parse(JSON.stringify(state));
newState.inputValue = action.value;
return newState;
}
if (action.type === "add_item") {
const newState = JSON.parse(JSON.stringify(state));
newState.list.push(newState.inputValue);
newState.inputValue = '';
return newState;
}
return state;
}
import React, { Component } from 'react';
import {connect} from 'react-redux';
class ToDoListLast extends Component {
constructor(props){
super(props);
this.state = store.getState();
}
render() {
return (
<div>
<div>
<input value={this.props.inputValue} onChange={this.props.changeInputValue}/>
<button onClick={this.props.handleClick}>提交</button>
</div>
<div>
<ul>
{
this.props.list.map((item)=>{
return <li>{item}</li>
})
}
</ul>
</div>
</div>
);
}
}
//state指的是store中的数据
const mapStateToProps = (state) => {
return {
inputValue:state.inputValue
}
}
//store.dispatch 挂载到props上
const mapDispatchToProps = (dispatch) => {
return {
changeInputValue(e){
const action = {
type:'change_input_value',
value:e.target.value
}
dispatch(action);
},
handleClick(){
const action = {
type:'add_item'
}
dispatch(action)
}
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(ToDoListLast);
import { createStore, applyMiddleware, compose } from "redux";
import reducer from "./reducer";
const store = createStore(reducer);
export default store;