redux（一）初步讀懂配置redux流程

原創

2020-02-20 23:01

創建state.js:

let state ={
	todos:JSON.parse(localStorage.todos?localStorage.todos:'[]'),
	count:localStorage.count?Number(localStorage.count):0
}

export default state;

定義action類型名常量count.js:

export const ADD_ACTION ='ADD_ACTION'
export const REMOVE_ACTION = 'REMOVE_ACTION'
export const CHANGE_ACTION ='CHANGE_ACTION'

定義action對象actionCreator.js:

import {ADD_ACTION,REMOVE_ACTION,CHANGE_ACTION}  from "./const"
let createAction = {
	addAction(title){
		return {  //action是一個對象  必須有type字段
			type:ADD_ACTION,
			title
		}
	},
	removeAction(id){
		return {  //action是一個對象  必須有type字段
			type:REMOVE_ACTION,
			id
		}
	},
	changeAction(id){
		return {
			type:CHANGE_ACTION,
			id
		}
	}
}

export default createAction;

定義執行對應的action的reducer.js:

import {ADD_ACTION,REMOVE_ACTION,CHANGE_ACTION}  from "./const"

import _state from "./state"

let reducer = (state=_state,action)=>{
	let new_state = Object.assign({},state);
	switch(action.type){
		case ADD_ACTION:
			new_state.count++;
			new_state.todos.push({
				id:new_state.count,
				title:action.title,
				finished:false
			})
			break;
			default:break;
	}
	localStorage.todos = JSON.stringify(new_state.todos);
	localStorage.count = new_state.count;
	return new_state;
}

export default reducer;

安裝redux，創建一個倉庫實例，傳入reducer，store.js：

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

定義派發action的文件（引入store.js和actionCreator.js）,actions.js:

import store from "./store";
import actionCreator from "./actionCreator"


let actions = {
	addAction(title){
		let act = actionCreator.addAction(title);  //{ type,title}
		store.dispatch(act);
	},
	removeAction(id){
		let act = actionCreator.removeAction(id);  //{ type,id}
		store.dispatch(act);
	},
	changeAction(id){
		let act = actionCreator.changeAction(id); //type id
		store.dispatch(act);
	}

}

export default actions;

組件內綁定事件執行添加的action：

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

class Input extends Component {
  constructor(props){
    super(props);
    this.input= this.input.bind(this);
  }
  input(e){
    if(e.keyCode==13){
        //view發出ACTION,改變狀態
       actions.addAction(this.input.value);
    }
  }
  render() {
    return (
      <div className="App">
         <input type="text" ref={(el)=>this.input = el} onKeyUp={this.input} />
      </div>
    );
  }
}

export default Input;