reac和redux完整开发篇 项目实战

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42262889/article/details/94187633

react+redux,相当于是MVC框架
把V和C分开,如果没有redux,会使用众多的state和this.state,和各种方法,使程序变得很乱

实战一个项目:


class App extends Component {
  consructor(props) {
    super(props);
    this.state = {

    }
  }

  _addTodo() {
    // 实现增加功能的state部分
  }
  _visibleTodoList() {

  }

  _footer() {

  }

  render() {
    return (
      <View>
        <AddTodo addTodo={()=>this._addTodo()}/>
        <ShowScreen visibleTodoList={()=>this._visibleTodoList()}/>
        <Show footer={()=>this._footer()}/>
      </View>
    );
  }

}

export default App;

// AddTodo 做法是

class AddTodo extends Component {
  consructor() {
    this.state = {
      content: []
    }
  }

  _addTodo() {
    this.state.content....
  }
}

exprort default AddTodo;

// ===============================================
// redux
//=========================================
import App from '.../App';

const store = createStore(rootReducer);

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

// App.js 怎么实现 View部分

const App = () => (
  <div>
    <AddTodo />
    <VisibleTodoList />
    <Footer />
  </div>
)

// <AddTodo />部分

return (
  <div>
    <form onSubmit>
      <input />
      <button />
    </form>
  <div>
);


// // 同样store部分
// //
// // 第一要创建store
// // 然后,把reducer和action类型在一起
// // 所以,store把reducer传入进去
// //
// // 编写reducer
// //
// // todos = (state = [], action)
// reducer的精髓就是把 就接收现在状态 state和,接收action
action是接收数据的 然后传入store,store联系reducer
reducer(state, action){
  return  newState
}

然后,store---->react-component

action--->store------>reducer(state, action){return newState}
store---> React.Component------>render

action相当于就是this.state包括类型
reducer里面就包含this.setState 相当于属于那些私有方法,_addTodo(){}等

在这里插入图片描述

展开阅读全文

没有更多推荐了,返回首页