react-redux的使用

 

我电脑有问题，或者是有一些别的问题，程序在我电脑上有错误。

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;