export type TODO = {
    text: string
}
//1.定義狀態(tài)數據
export type State = {
    todos: TODO[]
}

//2.定義行為
//action
export const ADD_TODO = 'ADD_TODO';
export const DELETE_TODO = 'DELETE_TODO';
//action creator
const ACTION_CREATOR_ADD_TODO = (text:string) => {
    return {type: ADD_TODO, payload: text}
};
const ACTION_CREATOR_DELETE_TODO = (text:string) => {
    return {type: DELETE_TODO, payload: text}
};
//分發(fā)數據變更操作，接收 store.dispatch
export function DISPATCH_ADD_TODO(dispatch: any) {
    return (text: string) => {
        dispatch(ACTION_CREATOR_ADD_TODO(text))
    }
}
export function DISPATCH_DELETE_TODO(dispatch: any) {
    return (text: string) => {
        dispatch(ACTION_CREATOR_DELETE_TODO(text))
    }
}

import { State, TODO } from "./model";
import { ADD_TODO, DELETE_TODO } from "./todoActions";
const initState : State = {
    todos: [
        {
            text: "clean room"
        }
    ]
};
//3.創(chuàng)建行為處理函數
const todoReducer = (state: State = initState, action: any): State => {
    switch(action.type) {
        case ADD_TODO:
            //返回一個新的狀態(tài)樹
            return {
                todos: [...state.todos, {text: action.payload}]
            };
        case DELETE_TODO:
            console.log('todoReducer delete >>>' + action.payload)
            const todos = state.todos.filter((item: TODO, index: number)=> {
                return item.text != action.payload
            });
            return {
                todos
            }
        default:
            console.log('return default>>>' + JSON.stringify(state))
            return state;
    }
};
export default todoReducer;

import { createStore } from 'redux';
import todoReducer from './reducers';
//4.創(chuàng)建 store，提供全局的狀態(tài)和行為處理
const store = createStore(
    todoReducer
);
//監(jiān)聽數據變化
store.subscribe( () => {
    console.log("store changed >>>" + JSON.stringify(store.getState()))
})
export default store;

import { createStore } from 'redux';
import rootReducer from './reducers';
const store = createStore(
  rootReducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);
export default store;

import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { Provider } from 'react-redux';
import ReduxTodoApp from './ReduxTodoApp';
import store from './redux/store';
const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
//5.分發(fā)給子元素
root.render(
  <Provider store={store}>
    <ReduxTodoApp/>
  </Provider>
);

import {useState} from "react";
import { connect } from "react-redux";
import { State, TODO } from "./redux/model";
import {DISPATCH_ADD_TODO, DISPATCH_DELETE_TODO } from "./redux/todoActions";
//6.數據和 action 函數需要通過 prop 訪問
function ReduxTodoApp (prop: {todos: TODO[], addTodo: any, deleteTodo: any}) {
    const {todos, addTodo, deleteTodo} = prop;
    const [text, setText] = useState('');
    const handleInput = (e: any) => {
        setText(e.target.value)
    }
    const handleAddTodo = () => {
        addTodo(text)
        setText('')
    }
    const handleDeleteTodo = (text: string) => {
        deleteTodo(text)
    }
    return (
        <div style={{display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center'}}>
            <h1>This Is Redux TODO App.</h1>
            <ul>
                {todos.map((todo: TODO, index: any) => {
                    return (
                        <li key={index}>
                            <span>{todo.text}</span>
                            <button style={{marginLeft: '12px'}} onClick={() => handleDeleteTodo(todo.text)}>finish</button>
                        </li>
                    )
                })}
            </ul>
            <div style={{display: 'flex', flexDirection: 'row'}}>
                <input value={text} onChange={handleInput}/>
                <button onClick={handleAddTodo}>Add Todo</button>
            </div>
        </div>
    )
}
//外部的數據（即state對象）如何轉換為 UI 組件的參數
//mapStateToProps會訂閱 Store，每當state更新的時候，就會自動執(zhí)行，重新計算 UI 組件的參數，從而觸發(fā) UI 組件的重新渲染。
const mapStateToProps = (state: State) => {
    console.log('mapStateToProps >>> ' + JSON.stringify(state))
    //返回的是一個對象，需要根據屬性名訪問
    return {
        todos: state.todos
    }   
}
//建立 UI 組件的參數到store.dispatch方法的映射
//定義了哪些用戶的操作應該當作 Action，傳給 Store
const mapDispatchToProps = (dispatch: any, ownProps: any) => {
    //返回一個 Prop 對象
    return {
        addTodo: DISPATCH_ADD_TODO(dispatch),
        deleteTodo: DISPATCH_DELETE_TODO(dispatch)
    }
};
//5.組件接收數據和分發(fā)行為
export default connect(mapStateToProps, mapDispatchToProps) (ReduxTodoApp);

{
  todos: TODO[], 
  addTodo: any, 
  deleteTodo: any
}