react-redux 的基本使用

1、在src下創建redux文件夾，並新建store.js

// store.js
import { createStore } from 'redux';
import reducers from './reducers/index';
export default createStore(reducers);

2、接着在redux文件下創建reducers文件夾，並新建index.js

//index.js
//combineReducers方法，用於 Reducer 的拆分，便於以后添加其他函數
import { combineReducers } from "redux";
import { todo } from "./todo.js";

export default combineReducers({
  todo
});

//todo.js
//只做了對數組增和刪兩個操作
const initialState = {
  list:[]
}
export function todo(state = initialState, action){
  if(action.type==="ADD_TODO"){
    let newState = JSON.parse(JSON.stringify(state));
    newState.list.push({
      content:action.payload
    });
    return newState;
  }else if(action.type==="DEL_TODO"){
    let newState = JSON.parse(JSON.stringify(state));
    newState.list.splice(action.payload, 1);
    return newState;
  }else{
    return state;
  }
}

3、接着去項目的index.js文件，使用Provider組件

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

//引入相關文件，並對根組件進行包裹，傳入store
//這樣一來，App的所有子組件就默認都可以拿到state了
import { Provider } from "react-redux";
import store from "./redux/store";


ReactDOM.render(
  <Provider store={store}>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </Provider>,
  document.getElementById('root')
);
reportWebVitals();

4、組件里使用store

//todoList.jsx
import React, { Component } from 'react';
//1、引入connect
import { connect } from 'react-redux'

class TodoList extends Component {
  handleDelete(index){
    this.props.deleteTodo(index);
  }
  render() {
    return (
      <div>
        <ul>
          {
            this.props.list.map((item,index)=>{
              return (
                <li key={index}>
                  <span>{item.content}</span>
                  <button onClick={this.handleDelete.bind(this,index)}>x</button>
                </li>
              )
            })
          }
        </ul>
      </div>
    )
  }
}

//2、把state里的數據映射到props里，可以通過Props使用
const mapStateToProps = (state) =>{
  return {
    list:state.todo.list
  }
}
//3、把action里的方法綁定到props上，可以通過Props使用，用於修改store里的數據
const mapDispatchToProps =(dispatch)=>{
  return {
    deleteTodo(index){
      dispatch({
        type:"DEL_TODO",
        payload:index
      })
    }
  }
}

//4、connect方法接受兩個參數：mapStateToProps和mapDispatchToProps，沒有則傳null
export default connect(mapStateToProps,mapDispatchToProps)(TodoList);