1:首先安装redux:
npm install --save redux
2:引入redux :
import { createStore } from 'redux';
//首先创建执行函数,Reducer 是一个函数, //它接受 Action 和当前 State 作为参数,返回一个新的 State。 function counter(state, action) { switch (action.type) { case 'INCREMENT': return state + 1; case 'DECREMENT': return state - 1; default: return state; } };
//Redux 提供createStore这个函数,用来生成 Store let store = createStore(counter,10);//createStore方法还可以接受第二个参数,表示 State 的最初状态。这通常是服务器给出的。
//Store 允许使用store.subscribe方法设置监听函数,一旦 State 发生变化,就自动执行这个函数 store.subscribe(() => alert(store.getState())//当前时刻的 State,可以通过store.getState()拿到。 );
store.dispatch({ type: 'INCREMENT' });//store.dispatch接受一个 Action 对象作为参数,将它发送出去(dispatch分派的意思)
3:以下两种方式是等价的:
一级父组件:
<TodoList todos={[{ text: 'Use Redux', completed: true }, { text: 'Learn to connect it to React', completed: false }]} } />
二级父组件:
const TodoList = React.createClass ( { render() { return ( <View> {this.props.todos.map((todo, index) => <Todo text={todo.text} completed = {todo.completed} )} </View> ) } } )
三级子组件:
const Todo = React.createClass({ render() { return ( <JDText {this.props.text} </JDText> ); } })
其中 二级父组件还可以这样写:
const TodoList = React.createClass ( { render() { return ( <View> {this.props.todos.map((todo, index) => <Todo {...todo} key={index} onClick={() => this.props.onTodoClick(index)} /> )} </View> ) } } )
4:关于export default 和 module.exports 区别
module.exports是CommonJS的模块规范
export default是ES2015的模块规范
加载方式 | 规范 | 命令 | 特点 |
---|---|---|---|
运行时加载 | CommonJS/AMD | require | 社区方案,提供了服务器/浏览器的模块加载方案。非语言层面的标准。只能在运行时确定模块的依赖关系及输入/输出的变量,无法进行静态优化。 |
编译时加载 | ESMAScript6+ | import | 语言规格层面支持模块功能。支持编译时静态分析,便于JS引入宏和类型检验。动态绑定。 |
使用方法:
方法一:统一使用ES6规范
使用export default connect(select)(App);抛出,
则使用import App from './containers/App'接受;
方法二:统一使用CommonJs规范
使用module.exports = connect(select)(App);抛出,
则使用const App = require('./containers/App');接受;