在react中使用redux

Posted 2022-10-29 鲨鱼小猫

创建Action

• action/index.ts

const sendAction = () => return type: "send_ action",value: "发送了 - -个action"
mqdule.exports = sendAction   

创建reducer

• reducer/index.ts

const initstate = 
    value: "默认值"
;
const rootReducer = (state = initState ，action) => 
    switch (action.type) 
        case " send_ type" :
            return object.assign(, state, action);
        default:
            default:
    
;  
module .exports = 
    reducer
;

创建store

• store/index.ts

import  createstore  from " redux" ;
import reducer from "xxx/reducer"
const store = createStore(reducer);
export default store;   

dispath

• App.ts

     import React from "react"; 
     import store from "xxx/store";
     import store from "xxxx/store";
     export default class App extends React.Component 
        handleclick = () => 
            const action = sendction;
            store.dipath(action);
        
        render() 
            return <button onClick=this.handleclick>dispath(action)</button>
        
     

subscribe

• App.ts

   import React from "react"; 
     import store from "xxx/store";
     import store from "xxxx/store";
     export default class App extends React.Component 
        handleclick = () => 
            const action = sendction;
            store.dipath(action);
        
        coponentDidrount() 
            store.subscribe(() => 
                console.log(store.getState());
                this.setState();
                console.log(store.getState());
            
        
        render() 
            return <button onClick=this.handleclick>dispath(action)</button>