React Redux Store

Giriş
Açıklaması şöyle.

React components can accept properties as well as manage their own state. Redux provides a global app state that any component can link into.

Nerede Faydalı
Açıklaması şöyle.

Redux gives you a global state. This can be helpful when you have deeply nested components that need to share the same state. Rather than passing unrelated properties down the component tree, you can simply access the Redux store.

Store Yaratma
createStore() metodu ile store oluşturulur. İlk parametre Reducer nesnesidir.

Reducer
Reducer yeni state nesnesi döner. Açıklaması şöyle.

The next thing you’ll need is a reducer to tell Redux how an action should affect the data store. Reducers should be pure functions that return a new state object rather than mutating the original state.
...
The reducer takes the current state object. If the state is undefined, which will be true during initialization, then you will want to provide a default, or initial, state. You then need to look at the type of the action to determine what you should do with the data.

Provider
React ile Redux'i birleştirmek için Provider sınıfı kullanılır. Provider React'ın ana bileşenini sarmalar.
Açıklaması şöyle. Böylece react'diğer bileşenleri Store nesnesine erişebilir.

The Provider component has access to the store and passes it along to child components using context. A component, later on, can access the store, even if it is deeply nested in the React tree.

Açıklaması şöyle.

It allows us to pass our store which contains the state into the React component. You can pass it the same way you pass the properties in the React component.

React Table Bileşeni

Örnek
render() metodunda şöyle yaparız

return(
  <div className='container'>
    <table>
      <thead>
        <tr>
          <th>User_Name</th>
          <th>Address</th>
          <th>Date Of Birth</th>
          <th>Email</th>
          <th>Profile Picture</th>
          <th>Edit</th>
          <th>Delete</th>
        </tr>
      </thead>
      <tbody>
        {this.state.arr.map((card)=>{
          return(
            <tr>
              <td>{card.user_name}</td>
              <td>{card.address}</td>
              <td>{card.date_of_birth}</td>
              <td>{card.email}</td>
              <td>{card.profile_picture}</td>
              <td><button className="btn ">Edit</button></td>
              <td><button className="btn ">Delete</button></td>
            </tr>
          ) })}
          </tbody>
    </table>
  </div>
);

/etc/nginx/nginx.conf Dosyası

Örnek
İskeleti şöyle.

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
        worker_connections 1024;
        # multi_accept on;
}

http {

        ##
        # Basic Settings
        ##
        ...

        ##
        # Security settings
        ##
        ...

        include /etc/nginx/conf.d/*.conf;
        include /etc/nginx/sites-enabled/*;
}

Function Binding

JavaScript Late Binding Kullanır
Açıklaması şöyle.

In languages like Ruby or Java, this (or in case of Ruby self) will always point to the object in which your method is defined. So in Ruby if you are working on the foo method inside the Bar class, self will always point to the object which is the instance of the Bar class.

JavaScript works quite surprisingly here. Because in JavaScript function context is defined while calling the function, not while defining it! This is what can surprise many when coming to JS from different fields. Such late binding is a powerful mechanism which allows us to re-use loosely coupled functions in variety of contexts.

4 Tane Late Binding Yöntemi Var
Function çağrılarında 4 tane şeyi bilmek gerekiyor.

-function invocation pattern
-method invocation pattern
-constructor invocation pattern
-apply invocation pattern

Function Invocation Pattern
Açıklaması şöyle. Function'ın önünde bir şey olmadan direkt çağrılması.

If there are no dots in your function call, your context is likely to be window.

Function Invocation Pattern
Açıklaması şöyle. Function'ın bir nesnenin parçası gibi çağrılması. foo.bar() gibi

If there are dots in your function call, your function context will be the right-most element of your dots chain.

Constructor Invocation Pattern
Açıklaması şöyle. Function'ın içinde bir başka function tanımlıdır. new'lenerek yaratılır ve new'lenen function içindeki function çağrılır.

Every time you see a new followed by a function name, your this will point to a newly created empty object.

Apply Invocation Pattern

Function'ın call() veya apply() metodları çağrılır ve this olacak nesne parametre olarak geçilir.
Function call metodu yazısına bakabilirsiniz.

Function.prototype.bind metodu
Açıklaması şöyle.

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

Bound Function'ların prototype alanı yoktur. Açıklaması şöyle.

...bound functions don't have a .prototype property because they don't need it. When you call a bound function with new, it calls the original function as a constructor, using the original's .prototype object as the prototype of the new instance.

In fact, since ECMAScript 6 many functions don't have a .prototype property with an object, because they are not constructors - they cannot be called with new so they don't need it. Among those are

- arrow functions (() => {…})
- methods (method() { … } in object literals and classes)
- builtin non-constructor functions (like Math.sin)

Örnek
Bağlamak için şöyle yaparız. foo fuction'ı içindeki this bundan sonra obj1'i gösterir.

function foo(something) {
  this.a = something;
}

var obj1 = {};

var bar = foo.bind(obj1);

Kullanmak için şöyle yaparız.

bar(2);
console.log(obj1.a); // 2

Function call metodu

Giriş
Açıklaması şöyle.

When you have a reference of the function in hand, you can call the function with the context provided by you. It can be done by using two methods that functions provide:

- call - it takes a context as the first argument. The rest of arguments are arguments passed to the function being called this way.
- apply - it takes a context as the first argument and an array of arguments for the function being called as the second argument.

this Parametresi verilmemesi
Açıklaması şöyle. Eğer call() metoduna parametre verilmezse window nesnesi kullanılır.

thisArg

Optional. The value of this provided for the call to a function. Note that this may not be the actual value seen by the method: if the method is a function in non-strict mode, null and undefined will be replaced with the global object and primitive values will be converted to objects.

Örnek
Şöyle yaparız.

function foo(){
  console.log(this);
}
foo.call(foo); //foo function
foo.call(); //window object

Örnek
Şöyle yaparız.

var f = function() {
  this.x = 5;
  (function() {
    this.x = 3;
  })();
  console.log(this.x);
};

f.call(f); //5

f(); //3

f.call(); //3