Redux学习之旅十一：React-Redux安装

React-Redux可以简化Redux的流程。

一、新建项目

我们新建一个项目，重新用React-Redux来实现。

create-react-app demo02

删除src文件下的文件，只保留index.js文件。

二、安装React-Redux

新建终端，输入以下命令安装react-redux：

npm install --save react-redux

安装redux：

npm install --save redux

新建TodoList组件：

import React, { Component } from 'react';

class TodoList extends Component {
    constructor(props) {
        super(props);
    }
    render() { 
        return ( 
            <div>
                <div>
                    <input/>
                    <button>提交</button>
                </div>
                <ul>
                    <li>JS</li>
                </ul>
            </div>
         );
    }
}
 
export default TodoList;

在src目录下新建store文件夹，建立index.js文件和reducer.js文件。

index.js文件：

import {createStore} from 'redux';
import reducer from './reducer';

const store = createStore(reducer);

export default store;

reducer.js文件：

import { act } from "react-dom/test-utils"

const defaultState = {
    inputValue:'Write Something',
    list:[]
}

export default (state = defaultState , action)=>{
    return state;
}

在TodoList.js文件中引入store：

import React, { Component } from 'react';
import store from './store';

class TodoList extends Component {
    constructor(props) {
        super(props);
        this.state = store.getState();
    }
    render() { 
        return ( 
            <div>
                <div>
                    <input 
                        value={this.state.inputValue}
                    />
                    <button>提交</button>
                </div>
                <ul>
                    <li>JS</li>
                </ul>
            </div>
         );
    }
}
 
export default TodoList;

运行效果：