redux简介--todolist练习（react,redux,antd）
Redux
Redux是Javascript应用的状态容器，提供可预测的状态管理,React应用离不开组件，而组建的状态（state）非常关键，它往往是一个或多个组件的核心。react提倡单向数据流概念，使得复杂数据通信变得简单，但不能完全有效的解决问题，我们还要通过setstate方法细粒度的控制状态的变化，并设计组件之间状态的通信，长此以往状态在没有统一管理下状态会变得混乱野蛮。此时，redux作为一个应用数据流架构，和react完美结合，能够在一定状态下解决状态的管理问题。
redux设计哲学
1. Single source of truth
“单一真相”，页面状态数据树被存储为一个javascript对象，随着用户操作或异步数据到达的变化而变化，let state = store.getState();来获取数据
2. State is read-only
对象是只读的，不能直接去改变存储状态数据的javascript对象，当页面需要展现新的数据状态时，只需dispatch（派发）一个action(动作、事件)
3. Changes are made with pure functions called reducer
使用reducer函数接收action，并执行页面状态数据树的变更，reducer并不直接更改页面状态数据树，而是根据当前的页面状态数据树，结合描述改变信息的action产生新的页面状态数据树
reducer与action都由开发者编写：
reducer接收两个参数（当前页面数据状态，被派发的action），reducer可理解为累加器，每次执行state根据action进行累加从而返回最新的state
函数式编程和纯函数
函数是一等公民，意味着函数优先（可以作为参数，返回值）
reducer是一个纯函数。纯函数对于指定输出，返回指定结果，不存在副作用，只能依赖其参数，开发者根据其输入，完全可以预测输出
todolist练习（react,redux,antd）
1.使用脚手架命令快速搭建项目
create-react-app demo
2.项目src目录中删除多余文件，只留下App.js以及index
3.根据项目要求创建文件夹和文件
redux文件夹下创建actionType.js\actions.js\reducers.js\store.js等文件
//actionType.js
// action 的类型
export const ADDITION = 'addition'
export const REMOVE = 'remove'
//actions.js
//描述状态如何修改，导出一系列生成action对象的工厂函数
//action是对象，对象用来描述如何对状态进行修改
//导出两个方法，工厂函数，专门用于生成action对象的
import { ADDITION,REMOVE } from "./actionType";
// action 里面书写了生成 action 对象的工厂函数
// 回头根据传入的 num 会返回一个 action 对象
// action 对象是对状态如何进行修改的一个描述
// 之后这个 action 会被派发到 reducer 里面
export const addition=(str)=>({
type:ADDITION,
data:str
})
export const remove=(i)=>({
type:REMOVE,
index:i
})
//reducers.js
// reducer 是一个纯函数，接收两个参数，第一个是初始状态，第二个是 action 对象
import {ADDITION,REMOVE } from "./actionType";
// 这里我们导出了一个名为 counter 的函数，这个就是一个纯函数，也是 redux 里面称之为的 reducer
// 函数接收两个值，初始状态，action 对象
const initialUserState = {
arr: ['学习 React','复习 Vue','玩游戏','听歌']
}
// reducer可以接收status，但是不可以修改status，这就是拿到status为什么不修改，而是直接拷贝
// 本页面添加数据有三种方法，备注了两个
export default function counter(state= initialUserState,action){
if (action.type == ADDITION) {
const newStatus = JSON.parse(JSON.stringify(state));
newStatus.arr.push(action.data);
// console.log(newStatus,'newStatus');
return newStatus;
// return {
// ...state,
// arr: [...state.arr, action.data]
// arr: state.arr.concat(action.data)
// }
}else if(action.type == REMOVE){
const newStatus = JSON.parse(JSON.stringify(state));
newStatus.arr.splice(action.index);
// console.log(newStatus,"old");
return newStatus;
}else{
return state
}
}
//store.js
// 仓库文件，调用 redux 里面有一个 createStore 的方法，接收一个 reducer 作为参数
// 这就是我们的仓库
import { createStore } from "redux";
import counter from "./reducers";
// 使用 createStore 方法创建仓库的时候
// 接收一个 reducer 作为参数
export default createStore(counter)
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
// 将仓库挂载到根组件上面，监听 store 状态的变化，只要一变化，我们就要重新渲染
import store from "./redux/store";
// 接下来需要将这个仓库挂在根组件上面
const render=()=>{
ReactDOM.render(
<React.StrictMode>
<App store={store}/>,
</React.StrictMode>,
document.getElementById('root')
);
}
render();//初始渲染
// 之后，只要仓库的状态发生变化，那么我们就应该重新渲染视图
store.subscribe(render)
app.js
import Home from "./components/Home";
import React from 'react';
import './App.css'
import store from "./redux/store";
import Seach from "./components/Seach";
import Lists from "./components/Lists";
const App = (props) => {
return (
<div>
<Home/>
<Seach store={store}></Seach>
<Lists store={store}></Lists>
</div>
);
}
export default App;
// 不再拥有自己的状态，状态从 store 里面获取。通过组件传值的方法传递store数据，通过props.store.getState() 来获取状态
// 修改仓库状态：派发一个 action 到 reducer
Redux官网：ғhttps://redux.js.org/
浙公网安备 33010602011771号