React專案中中使用redux進行資料管理

2021-09-25 03:34:31 字數 2030 閱讀 2079

二、在src目錄下建立store資料夾，再在store資料夾中建立index.js檔案和reducer.js檔案

三、在剛剛建立好的index.js檔案中引入

import  from 'redux';


import reducer from './reducer';


const store = createstore(reducer);


export default store;
在剛剛建立好的reducer.js檔案中，返回乙個函式，在函式中判斷action的型別，針對不同的型別，對資料進行不同的操作，最後將state返回

const defaultstate = ;


export default (state = defaultstate,action) =>


}if(action.type == 'serch_blur') 


}return state;


}
要。。。。包裹起來，代表store中的資料可以**中間的。。。元件使用

import react,  from 'react';


import from './style.js';


import from './statics/iconfont/iconfont.js';


import header from './common/header/index.js';


import store from './store/index.js';


import from 'react-redux';


render() 


}
在元件中要import from 『react-redux『』，原來的this.state.falsed(自己定義的資料）就可以改為this.props.falsed,但由於是無狀態元件，就直接寫成了函式，傳參props，所以就直接寫成了props.falsed

/*store裡面的資料如何對映到這個元件的props中去*/

const mapstatetoprops = (state) =>

}/*定義action的型別，方便reducer.js去判斷，一定要dispatch出去！！！*/

const mapdispatchtoprops = (dispatch) =>;

dispatch(action);

},handleinputblur() ;

dispatch(action);}}

}最後向外暴露export default connect(mapstatetoprops,mapdispatchtoprops)(header);

import react from 'react';


import from 'react-transition-group';


import from 'react-redux';


const header = (props) =>


timeout=


classnames="slide"


>


寫文章


註冊 );


} /*store裡面的資料如何對映到這個元件的props中去*/


如何優雅地在React專案中使用Redux
首先我們會用到哪些框架和工具呢？ui框架 狀態管理工具，與react沒有任何關係，其他ui框架也可以使用redux react外掛程式，作用 方便在react專案中使用redux 中介軟體，作用 支援非同步action tips 與redux無關的目錄已省略 src store redux目錄 ac...


在專案中使用react
1.執行 cnpm install react react dom s react安裝包 專門用於建立元件和虛擬dom的，同時元件的生命週期都在這個包中 react dom安裝包 專門進行dom操作的，最主要的應用場景就是reactdom.render 2.在index.html頁面中建立容器 di...


react專案中使用plop
第一步，安裝依賴 npm install plop dev 或者用yarn yarn add plop dev 第二步，在package同級目錄下新建plopfile.js 這是plop的入口檔案，需要匯出乙個函式，此函式接受乙個plop物件，用於建立生成器任務 1 module.exports p...