Redux.txt


-action:1 object tự định thuộc tính, dùng type để phân biệt action
vd:
add = {
type:'ADD'
value:1
}
hoặc có thể dispatch trực tiếp vd: store.dispatch(action)
hoặc function trả về obj vd:
createAddAction=(number)=>{return {type: 'ADD', value:number}}
-reducer: nơi viết logic chính, function gồm 2 tham số(state,action) state là state cũ của nó, action đang tương tác
vd:
const numberReducer=(state,action){
switch(action.type){
case 'ADD':
//giải quyết state
//state.number+=action.value //mutable state
state = {
...state,
number:state.number+action.value //immutable state,có dc trạng thái trước và sau vd thêm biến histories[...state.histories,state.number+action.value]
}
break;
}
return state//bắt buộc trả về
}
-store: import {createStore}
store = createStore(<Reducer>,<state ban đầu>)//chỉ nhận dc 1 reducer
//-> import thêm combineReducers
//VD:reducer = combineReducers({number:combineReducer//các state reducer 1},err:errorReducer//các state reducer 2})
//nếu xài combineReducers add vào tham số t2->cho reducer tham số mặc định
store.subcribe(callback)//nghe thay đổi, dki 1 lần
store.dispatch(<action>)//thực hiện action

-Middleware lớp trung gian chèn vào reducer tăng tính xử lý
//có cho action thông qua không vd:get API ms cập nhật state
//import applyMiddleWare
vd: const checkIsZero = store => next=> action=>{
const currNumber =store.getState().number.number;
if(currNumber ==0){
//cho action chạy tiếp	
next({type:'LESS_THAN_ZERO'})
}
else{next(action)//cho action chạy tiếp	}
}
//chạy bằng cách đưa vào store 
VD: store = createStore(reducers,applyMiddleWare(checkIsZero,//hoặc nhiều MiddleWare));
	+redux-thunk: import thunk from 'redux-thunk'
cho phép dispatch funtion có dạng 
vd: const addAfter3s=()=>{
return dispath=>{
//dispatch ngay: dispatch(<action>)
//sau 3s: setTimeout(()=>dispatch(add),3000)
}
}
store.dispatch(addAfter3s())
 store = createStore(reducers,applyMiddleWare(thunk,//hoặc nhiều MiddleWare));

-Provider import from 'react-redux'
<Provider store = {store}>...<Provider/>

-connect: trả về function
import connect from 'react-redux'
export default connect(state=>{return {<tên props>:<state của reducer/nếu là reducer thì ta gọi đúng tên mà ta đặt cho Reducer này trong combine Reducer>}}//1 function lắng nghe trả về tất cả các state của reducer)(<component>);
----->vd:
<reducer/index.js>
import {combineReducers} from 'redux';
import CartReducer from './CartReducer';

const rootReducer = combineReducers({
  cartsModify: CartReducer,
});

export default rootReducer;
<component.js>
const mapStateToProps = state => {
  return {
    cartsModify: state.cartsModify.icon,
  };
};
export default connect(mapStateToProps)(PetItem);
***khi muốn dispatch nhiều action trong component
const mapDispatchToProps = dispatch => ({
  AddToCart: () => dispatch({type: 'ADD_TO_CART'}),
  RemoveFromCart: () => dispatch({type: 'REMOVE_FROM_CART'}),
});
export default connect(mapStateToProps, mapDispatchToProps)(PetItem);