Redux入门开发步骤(一)
导入命令创建redux项目 和配置redux依赖
create-react-app todoredux2
cd todoredux2
code .
npm install react-redux
npm install redux
建立目录
actions(现在是空文件夹)
containers (现在是空文件夹)
components------Footer.js
reducers---------index.js(组装响应组件渲染给页面的)
项目结构 删除了些没用的css样式和图标
Footer.js
import React, { Component } from 'react'
class Footer extends Component {
render() {
return (
<div>
<span>Show: </span>
</div>
)
}
}
export default Footer;
reducers/index.js
import { combineReducers } from 'redux';
export default combineReducers({
});
App.js
import React, { Component } from 'react';
import Footer from './components/Footer';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from './reducers';
const store = createStore(rootReducer)
class App extends Component {
render() {
return (
<Provider store={store}>
<div >
<Footer/>
</div>
</Provider>
);
}
}
export default App;
对App.js文件做改动 创建了商店(store)用于存储状态
使用<Provider>标签包裹 此为Redux 固定写法
<Provider store={store}>
<div >
<Footer/>
...
</div>
</Provider>
只要(组件)和reducers响应 和App.js文件联通即可显示上述页面
Redux入门开发步骤