1.搭建redux结构

新建store文件

import {createStore} from 'redux';
import reducer from './reducer';
const store = createStore(
    reducer
)
export default store

新建reducer文件

const defalutState = {
    inputValue:'hello world',
    list:[]
}
export default (state=defalutState,action)=>{
    return state
}

组件

import React, { Component } from "react";
import store from './store/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>test</li>
        </ul>
      </div>
    );
  }
}
export default TodoList;

2.在index文件中引入Provider（提供器）

引入**Provider后所有被Provider**包裹的组件（可包裹多个组件）都可以使用store中的state

import React from "react";
import ReactDOM from "react-dom";
import TodoList from "./TodoList";
import { Provider } from "react-redux";
import store from "./store/store";
ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <TodoList />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

注意：Provider不可以使用变量包裹，否则会报错如👇

import React from "react";
import ReactDOM from "react-dom";
import TodoList from "./TodoList";
import { Provider } from "react-redux";
import store from "./store/store";
const App = (
  <Provider store={store}>
    <TodoList />
  </Provider>
);
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

3.在组件中引入connect（连接器）

将原来export 出去的组件，通过connect方法连接store
connect方法中第一个参数为获取store中state的映射关系

import React, { Component } from "react";
import {connect} from 'react-redux';
class TodoList extends Component {
    constructor(props){
        super(props)
    }
  render() {
    return (
      <div>
        <div>
          <input value={this.props.inputValue}/>
          <button>提交</button>
        </div>
        <ul>
          <li>test</li>
        </ul>
      </div>
    );
  }
}
const stateToProps = (state)=>{
    return{
        inputValue:state.inputValue
    }
}
export default connect(stateToProps,null)(TodoList);

connect方法中第二个参数为修改store中state的映射关系

import React, { Component } from "react";
import {connect} from 'react-redux';
class TodoList extends Component {
  render() {
    return (
      <div>
        <div>
          <input
           value={this.props.inputValue}
           onChange={this.props.inputChange}/>
          <button>提交</button>
        </div>
        <ul>
          <li>test</li>
        </ul>
      </div>
    );
  }
}
const stateToProps = (state)=>{
    console.log(state)
    return{
        inputValue:state.inputValue
    }
}
const dispatchToProps=(dispatch)=>{
  return {
   inputChange(e){
      let action = {
        type:'change_input',
        value:e.target.value
      }
      dispatch(action)
    }
  }
}
export default connect(stateToProps,dispatchToProps)(TodoList);

注意：还要修改reducer中的业务逻辑

完整代码

组件：TodoList.js

import React from "react";
import { connect } from "react-redux";
const TodoList = (props) => {
  const { inputValue, inputChange, clickBtn, list } = props;
  return (
    <div>
      <div>
        <input value={inputValue} onChange={inputChange} />
        <button onClick={clickBtn}>提交</button>
      </div>
      <ul>
        {list.map((value, index, array) => (
          <li key={index}>{value}</li>
        ))}
      </ul>
    </div>
  );
};
const stateToProps = (state) => {
  console.log(state);
  return {
    inputValue: state.inputValue,
    list: state.list,
  };
};
const dispatchToProps = (dispatch) => {
  return {
    inputChange(e) {
      let action = {
        type: "change_input",
        value: e.target.value,
      };
      dispatch(action);
    },
    clickBtn() {
      console.log(1111);
      let action = {
        type: "add_item",
      };
      dispatch(action);
    },
  };
};
export default connect(stateToProps, dispatchToProps)(TodoList);

入口文件：index.js

import React from "react";
import ReactDOM from "react-dom";
import TodoList from "./TodoList";
import { Provider } from "react-redux";
import store from "./store/store";
ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <TodoList />
    </Provider>
  </React.StrictMode>,
  document.getElementById("root")
);

redux：reducer.js

const defalutState = {
    inputValue:'hello world',
    list:[]
}
export default (state=defalutState,action)=>{
    if(action.type === 'change_input'){
        let newState = JSON.parse(JSON.stringify(state))
        newState.inputValue = action.value
        return newState
    }
    if(action.type === 'add_item'){
        let newState = JSON.parse(JSON.stringify(state))
        newState.list.push(newState.inputValue)
        newState.inputValue=''
        return newState
    }
    return state
}

redux：store.js

import {createStore} from 'redux';
import reducer from './reducer';
const store = createStore(
    reducer
)
export default store